Import and use external fonts

Google has a great collection of fonts that you can use in any OL Connect template. You could download them and import them into the template (simply drag the appropriate font files into the Fonts folder within the Resources pane), but the other option is to leave the fonts where they are, online, and use them as web fonts. This How-To shows how to do that.

Step 1: Select fonts

First go to https://fonts.google.com/ and find the fonts to use in your template. Look up ‘Festive’ for example. Click on the font; then, to the right, click on + Select this style.
Repeat this for each of the fonts that you want to use.

Step 2: Get the URL

When you’ve selected all the web fonts that you want to use in your template, the next step is to get the URL of a CSS file from the same website:

• Click the icon at the top right to “View the selected families”.
• In the side bar, under Use on the web click the option @import.
• From the <style> declaration, select and copy the URL, for example: https://fonts.googleapis.com/css2?family=Festive&display=swap

This URL points to a CSS file that has font-face declarations for the fonts that you selected. You can see them when you paste the URL in a browser. The CSS looks similar to this:

@font-face {
  font-family: 'Festive';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/festive/v1/cY9Ffj6KX1xcoDWhJtDqyg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Step 3: Add the remote style sheet

Copied the link? Then the last step is to add a remote CSS file to the template using the link.

• Open the template in OL Connect Designer.
• On the Resources pane, right-click Stylesheets and then select New Stylesheet > Remote CSS file.
• In the URL box, paste the link that you copied.
• Give the stylesheet a name, for example: Festive, and click OK.

Use the font

Once the remote stylesheet is in place, you can start using the selected web fonts like any other font type.

You can use the Fonts drop-down in the toolbar to apply the font to selected text.

You can use the font name in CSS to apply it to certain elements. For example, here is the font applied to all paragraphs in the template:

p {
font-family: 'Festive', cursive;
}

The font name can be used in scripts as well, for example: results.css('font-family', 'Festive');.