Embedding an External Web-font

This option is mostly used by designers who have obtained a font that they would like to embed on their landing page. If you'd like to embed a Google font, there's no need to embed anything as it's a built-in feature in Pagewiz.

In case you would like the font to apply to all elements located on your page, embed the following CSS code:
<style>
@import url(Font URL);
body, html, h1, h2, h3, h4, h5, h6, h7, div, span, p, input, label  
{
font-family: ENTER YOUR FONT-FAMILY HERE !important;
}
</style>

For example, to embed the 'Open Sans Hebrew' font:

<style>
@import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
body, html, h1, h2, h3, h4, h5, h6, h7, div, span, p, input, label 
{
font-family: 'Open Sans Hebrew', sans-serif !important;
}
</style>

That's it. Now all text elements on your page will display the font you have embedded.

However, In case you would like to embed the external font only to specific element/s, please follow this guide:

Step 1: Embed the Font into Pagewiz.

  • Go to your Pagewiz account and open the page in Design mode.
  • Click 'Page Settings' from the ribbon menu, select 'Scripts & Styles', and click 'Styles'.
  • Click 'Add A New Style'. Name your style so that you can identify it later. Add code like the example below. Remember to:
    1. replace the Font URL, and Font name with your actual Font URL and Font name.
    2. Wrap your CSS code with the <style> tags, as shown.
      <style>
      @import url(Font URL);
      </style>

Step 2: Specify the font for each element.

Create a CSS code for the elements for which you wish to apply this font.

  • Open the landing page in your browser. If the page is not yet published – click 'Preview' to preview the page.
  • Right click on the element on which you wish to use the font. For example, if it's a Headline element, place your mouse cursor over the headline text and right click it. From the drop down menu, click 'Inspect Element'. You will see information about that element. Copy the ID of the element and keep note of it. This is your ElementID.



  • Go back to your Pagewiz account and open the page in Design mode.
  • Click 'Page Settings' from the ribbon menu, select 'Scripts & Styles' and click 'Styles'.
  • Click 'Add A New Style'. Name your style so that you can identify it later. Add a code like the example below. Remember to wrap your CSS code with the <style> tags, as shown.
    <style>
    #[your-element-id]
    {
     font-family: [your-font-name];
    }
    </style>
  1. Replace the Font name with your actual Font name. Don’t forget to remove the brackets.
  2. Paste your ElementID. Don’t forget to remove the brackets.

Click 'Apply' and then 'Save' your work on the page. Now that element on your page displays in the font you embedded.

Have more questions? Submit a request

0 Comments

Article is closed for comments.