Importing Google Fonts

In this tutorial you will discover how to import Google Fonts.

ThemeWare® provides you with the option of importing Google Fonts automatically.

Disclaimer: The information in this article is of a general nature and cannot replace specific legal advice. Before using font APIs such as Google Fonts, be sure to seek legal advice regarding the General Data Protection Regulation (GDPR)!Selecting and configuring fonts

1. Choose a Google Font of your preference

2. Click the "+ Select this style" button next to a style of the font. (1)

3. An offcanvas element "Selected family" will open.

4. In the paragraph "Use on the web" you will find the section "CSS rules to specify families"

5. There you will find a CSS instruction for the selected font (2) (e.g. font-family: 'Open Sans', sans-serif;).

6. Select the font and the fallback font and copy both into the configuration field for the ThemeWare® font (e.g. 'Open Sans', sans-serif')

You can use the same font for the "Text" and the "Headlines". In case you want to use different fonts, repeat the steps for the other font.

Screenshots

"Open Sans" by Steve Matteson on Google Fonts

Configure font weight

In the configuration fields "Font weight for Google Fonts (Text)" and "Font weight for Google Fonts (Headlines)" you can define which font weight should be imported. Here you have to check which font weights are possible (depending on the font).

Important: Make sure that the desired font weights are available in all selected fonts. For example, if you want to use a font weight of 300 for "light", all fonts you are going to import must support a font weight of 300.

Tip: Please also adjust the general configuration for font weights.

Importing Google Font(s)

To make sure that the fonts are being imported, ThemeWare® offers the configuration "Import Google Fonts" in the section "Google Fonts". Please select the option "Yes" here.

Now the desired fonts are being imported via the Google Fonts API and are available to all visitors.

Important: We recommend that you integrate Google Fonts locally and not import them via the Google Fonts API. Before using font APIs such as Google Fonts, be sure to seek legal advice regarding the General Data Protection Regulation (GDPR)!Screenshots

"Google Fonts" configuration of ThemeWare®

Note: You can find more information about "Google Fonts in ThemeWare®" in the ThemeWare® Manual: Google Fonts.

---

Further information

• Tutorial: Embedding fonts locally

• Tutorial: Embedding fonts locally using the ThemeWare® Customizing Plugin