How to Use Custom Fonts to Customize Your Website Overlays

Picreel allows you to customize your website overlays with custom fonts to make them more appealing. You may use any custom font to edit your overlays.

Benefits of using custom fonts:

1. Higher click-through rate of your website overlays

2. Lesser bounce rate

Note: Make sure you have a WOFF or TTF format file with your font.

To use custom fonts:

Step 1: Go to Campaigns >> Edit to open a campaign’s ‘Edit Design’ section.

Navigating to the 'Edit Design' section of a campaign

Step 2: Click ‘Fonts’ on the left panel.

Adding a new font

Step 3: Click ‘+Add New Font’ and upload your font file using the 'Upload' button. Wait for a few seconds to get your file uploaded.

Uploading the font file

Step 4: Enter the font name in the Font family field. Without brakes. Space allowed.

Entering font name, style and weight and then generating the font face

You can customize weight and style:

Types of weight:

Light 300
Regular 400
Book 500
Medium 600
Bold 700
Semibold 800
Extrabold 900

Types of styles:

Italic
Normal
Bold

Step 5: Click Generate @fontface. Generated code will appear at the top of the CSS tab.

Checking the newly generated font face in the CSS tab

Step 6: To apply the downloaded font, you need to copy the font-family property: ‘Your Font Name’ and add it to the properties of elements you wish to implement it with.

Copying the newly added font

Pasting it in the desired place to customize the font

Note: An alternate option for using custom fonts is that your website administrator can set the Access-Control-Allow-Origin CORS configuration to allow pulling fonts from all domains. Also, you need to include the link to the font that should be used. It should be included in the overlay.

That is all about using custom fonts to edit your overlays.

Related Articles:

Was this information helpful?

Thank you Your feedback helps us to continually improve our content.