Setup
Add the Webfont Helper stack to the stacks editor. Then simply select the font you want to use and drag/drop it anywhere outside of the Webfont Helper stack.
Important: Do not publish your project with the Webfont Helper stack still in the editor. While this will certainly not cause any harm to your project/website it can cause an insanely long upload time as there are over 1000 font files included in this stack. We have broken each of the 45 fonts into separate stacks that can be dragged and dropped outside of the Webfont Helper stack to use. Once you have chosen fonts you want to use, delete the Webfont Helper stack from the editor and only the selected font files will be uploaded.
Each individual font stack has its own settings for implementation.
Manually
By default you must apply the font manually by using any of the highlighted font titles in a “Font-family” field inside of another stack. You may need to add quotation marks (“”) around the title depending on the stack you are using.
If you are familiar with CSS you can use the titles in the “font-family” rule. The example below will apply the font to the entire webpage.
body {
font-family: “Nunito”;
}
Headers, Text, Headers & Text
There are options to automatically apply the font to Headers, text, or both.
Note: Some stacks may overwrite the font if they have their own font settings.
Wrapped content
When set to apply to wrapped content, only text content placed inside of the font stack will have the font applied to it.
Custom CSS Class
There is also an option to create a custom class if you have the ability to add classes to your elements.
GDPR Compliance
Google Fonts fall into a grey area with the new GDPR regulations and most professionals suggest you do not load fonts externally to be safe. This stack allows you to use some great fonts hosted on your own server without linking to Google.