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?
© 2005 - 2023 ProProfs