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.



Was this information helpful?
© 2005 - 2023 ProProfs