How do I embed a google/adobe 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:

mceclip1.png

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

Use the Font

Add styles to the pages Custom CSS section to specify where you want to use the font:

 

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.

Only STANDARD fonts are available to choose from in the drop-down:

You can determine how the Google font will be used in the custom CSS section of your Landing Page, Email Template or Brand.

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:

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.