Adding Local and Google Fonts

Learn how to add Google Fonts to your project.


In the Skin Editor:

  1. Open the skin properties. (You may need to click in the Canvas to see the properties.)

  2. Find the External Files pane.

  3. Double-click in the table to add the file.

  4. Choose CSS.

  5. Add the URL of the font in the URL column. For example, https://fonts.googleapis.com/css?family=Quicksand. If you’re using an external local file, you would add its file path, assets/myfont.tff

  6. Edit the Embedded Stylesheet by clicking the edit button.

  7. Amend the stylesheet to include the new class and styles:

    .ggskin.title { font-family: 'Quicksand', sans-serif; font-size: 20px;} 

    .title is the class.

  8. Add a Text Box.

  9. Open the Advanced pane.

  10. Add title to the CSS Classes field. ★ Do not include the period .. Multiple classes can be added, separated by spaces.

  11. Check the style with Live Preview or Live Update.

★ Tip: To include CSS/Fonts in a component, add the CSS to the Code Element. This way, the code element can be bundled in with the component without the need to rely on the skin’s embedded stylesheet.


See also