How To: Use Google Fonts within the Program Editor (Internal)

Google Fonts offer a huge range of free fonts that our clients can use for their program.

Google Fonts can be added to the program, but are not recommended for Emails. If you ever do use custom fonts in Email, ensure the fall-back font also looks good, as likely well over 50% of recipients will be viewing the fall-back style.

Choose your Google Font

  • There are tons of fonts available. When you see a font you like, select the + sign to add the "Font Family".
You can add multiple Fonts at the same time by adding multiple Font Families, so if you are using multiple fonts on the same page or site then you will only need to "import" or "link" Google Fonts once!
  • Open the minimized bar in the bottom right hand corner of Google Fonts to open the information of your selected fonts.
  • Note the embed instructions.

Explanation and Important of Fallback Fonts

You may have noticed that there are multiple fonts listed in the CSS. This is because not every web browser or email client may render the font the same way. If for any reason the first listed font cannot be loaded properly, it will default to the next font in line, and so on.

The following fonts are considered the most "web safe" and recommended as a fallback font:

  • Arial / Helvetica
  • Times New Roman / Times
  • Courier New / Courier

Embedding the Font - HTML (Standard)

You can add the code to any page by adding the HTML to the advanced Page sections. Make sure you put this in between an opening and closing HTML tag!

Example:

<html>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
</html>

After the font is "uploaded" by calling it in the HTML, you can apply the font to any text areas you'd like using CSS.

Example:

font-family: 'Oswald', sans-serif;

Embedding the Font - @Import (CSS)

You may also add the font to your program by importing the font using only CSS.

Example:

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
</style>

After the font import is present in the CSS, you can apply the font using CSS as well.

Example:

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

body {
font-family: 'Oswald', sans-serif;
}

</style>


How did we do?


Powered by HelpDocs

Powered by HelpDocs