How do I embed a google font?

This method can be used for any font hosted externally. However if the font is hosted on another domain, the following header needs to be set on that domain:

Access-Control-Allow-Origin

Embedding on a Landing Page

Include the Font

Paste the following code with your specific font URL into the page properties script tag:




<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type ='text/css'>

Use the Font

Google Fonts can be selected as your Brand defaults in your Branding area of you account

Embed in an email

To embed in an email, you will need to use an import statement:

Embed in a brand

A font can be embedded into a brand and used anywhere the brand is used:




If you want to use the Google font for your forms as well, add this section of code to the Custom CSS block:




If you are embedding the font in your brand, you should also put the link statement into your global script tag under Administration => Account Settings:




Note!: You will not see your Google font in the fonts drop-down when editing a Landing Page, an Email Template or your Brand under Assets => Brands.

CSS example

Note that this CSS will vary depending on how you want to apply the font. The sample CSS below will apply to all elements of the page:

@import url('https://fonts.googleapis.com/css?family=Roboto');

body,
body .activedemand-button-container .activedemand-button,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body li, body label, body input, body textarea, body button, body td, body div {
font-family: 'Roboto', sans-serif !important;
}


Another way to specify where Google font is used in the Asset is editing the source code:




As the editor doesn't show all the CSS you are adding to the page, you can check how Google fonts render in the PREVIEW mode:

Updated on: 16/10/2022