Fonts
Web fonts, an essential part of every modern website, can be managed using the Fonts backend module. Veello Theme provides several sources of web fonts to choose from: Google Fonts and local or external files.
The configuration of a web font is as simple as entering an internal name (e.g., "Headline" or "Body text") and choosing one of the font types:
- Google Fonts
- Choose from over 1000 fonts provided by Google Fonts. Please note that you can store those fonts locally, which means the website will be GDPR/DSGVO compliant.
- Custom CSS code
- Enter your custom CSS code. This is a perfect choice when you store the fonts locally on your server.
- Custom HTML code
- Enter your custom HTML code. This will add the HTML tags to the
<head>section. It can be helpful with external solutions such as TypeKit.
Google Fonts
The Google Font type provides a feature-rich font picker, which allows you to easily browse over 1000+ fonts from Google Fonts. To quickly find the font you need, search for it using keywords or filter by letter or font type. Moreover, you can provide your custom text to see how the font would look like.
Hint
Please note that you can store those fonts locally, which means the website will be GDPR/DSGVO compliant.
Custom CSS code
The Custom CSS code type allows you to enter any CSS code for the font definition. It is the best solution if you would like to store your custom fonts directly on the server. Please note that the Font family value must match the one in the CSS declaration.
Custom HTML code
The Custom HTML code type allows you to enter any HTML code for the font definition. It is the best solution to include fonts from an external source, like TypeKit.
Adding fonts to the page
Once you have created your font records, it is time to add them to the page. Please note that the created fonts are not included on your page immediately after you created them.
Fonts can be included in two different ways:
Automatically
Font is included on the page automatically if you have selected it in any element that supports font selection. Most often the font selection appears in style presets of various content elements and design settings. Once the font is selected there and the element make its way to the page, the font will be added automatically.
Manually
You can also select fonts directly in the design settings and they will be always included on the page with this design. This way is useful when you would like to use the font outside of components supporting font selection, e.g. in custom SCSS files.
