Google Fonts

You can embed any of the fonts available at Google Fonts foundry in your site. Although these fonts cannot be added to the font library and will not appear in the inline text editor, they can be applied to various elements on your site via CSS.

Embed Font

  1. Open the font you need on Google fonts and select it. In the pop-up window, copy and save the @import url and font-family lines of code:

    Important: under Embed code, do not copy the entire code snippet including the <style></style> tags. Simply copy the @import url line.

  2. In Developer Mode, open Site HTML/CSS > site.css and past the @import url code:

Apply the Font via CSS

To set the font you embedded as your site's global font, add the following CSS line to site.css. For more information on adding custom CSS, see Developer Mode.

"*#dm div.dmContent *, *#dm div.dmFooter *, *#dm {YOUR_GOOGLE_INTEGRATION_CODE}"

Replace YOUR_GOOGLE_INTEGRATION_CODE above with the font-family CSS code you copied from Google Fonts. Click Save.

Apply the Font to a Specific Widget

To apply a font to an individual widget:

  1. Right-click the widget, and click Edit HTML/CSS to open the widget's HTML/CSS editing window.
  2. Add the font-family CSS code you saved in Step 2 above between the brackets { } under general or device specific CSS.

The font is now applied to the widget’s text elements and you can use the inline editor to change the colors and edit the text as normal.

Apply Font to Specific Global Site Fonts

To apply your custom fonts globally, you must replace the specific CSS elements with your custom font name. To do this:

  1. Click the Developer Mode button in navigation bar.
  2. Click Site HTML/CSS, and then click site-theme.css.
  3. Search for the specific heading or font class you want to change (for example, H1, H2, and so on), and replace the current font family with your custom font name.
  4. Click Save.
  5. Click Close to close developer mode.