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 div.dm-title {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.

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

Feedback on this article

0 comments

Please sign in to leave a comment.

×

Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!