How to 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
- Paste the <link> into the page properties script tag:
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
- Using the Font
Add styles to the pages in the Custom CSS section to specify where the font is to be used.
Embed in an email
To embed in an email, use the following import statement:
Embed in a brand
A font can be embedded into a brand and used anywhere the brand is used:
If a Google font needs to be used for specific forms, add the following section of code to the Custom CSS block:
If embedding the font in the brand, put the following link statement into the global script tag under Administration
then Account Settings:
Please Note: The Google font will not display in the fonts drop-down when editing a Landing Page, an Email Template or the Brand under Assets see Brands.
Only STANDARD fonts are available to choose from in the drop-down:
To best determine how the Google font is to be used in the custom CSS section of the r Landing Page, Email Template or Brand.
Please Note: This CSS caries depending on how the font is to be applied. The sample CSS below will apply to all elements of the page:
@import url('https://fonts.googleapis.com/css?family=Roboto'); body, 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 { font-family: 'Roboto', sans-serif !important; }
Please Note: Another way to specify where Google font is to be used in the Asset is to edit the source code:
As the editor doesn't show all the CSS being added to the page, check how Google fonts render in the PREVIEW mode:
