How to Embed a Google Font in Enquire MAP
The method of embedding a Google Font 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 the following URL into the page properties' script tag:
Use the Font
Add styles to the page's Custom CSS section to specify where the font should be used:
Embed in an email
To embed in an email, an import statement is to be used:
Embed in a brand
A font can be embedded into a brand and used anywhere the brand is used:
To also use the Google font for the forms, add this section of code to Custom CSS block:
If embedding the font in the brand, put the link statement into the global script tag by accessing Administration > Account Settings:
Note!: The Google font will not be visible in the fonts drop-down when editing a Landing Page, an Email Template or the Brand accessible by Assets > Brands.
Please note: Only standard fonts are available to choose from in the drop-down:
The Google font will be used in the custom CSS section of the Landing Page, Email Template or Brand.
------
CSS example
Please Note: The CSS will vary depending on how the font to be applied is determined. 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;
}
Editing the source code is another way to specify where Google font is used in the Asset is:
As the editor does not show all the CSS being added to the page, the Google fonts and their rendering can be viewed in Preview mode:
Please reach out to the dedicated Enquire Account Manager or Enquire MAP Support team for further assistance.