This guide will show you how to create Webfont kit using Font Squirrel generator. It’s a great resource with a wide range of free fonts.
If you want to add a custom font to a theme, you will need to generate a webfont kit, which contains font source files and a stylesheet with @font-face rules. The easiest way to create it is by using an online generator.
Generate Archive
Upload the font source files (.ttf or .otf formats) into the generator:
After you uploaded the fonts, select the Expert mode and choose the font formats in which we need to convert the source file(s). Make sure to check TrueType, WOFF, WOFF2, and EOT Compressed. SVG format is optional.
If your website is multilingual, specify the additional subsetting options under ‘Custom Subsettings’.
The last step is to check the agreement box. Once checked, you will see the download button.
Editing stylesheet.css
Open the stylesheet.css file from the downloaded package and find the font-family value. Make sure that the name of your folder is the same as the font-family value.
If the font has multiple font weights, make sure each @font-face rule has the same font-family value. Save the stylesheet.css after your make the changes.
Depending on each font style, edit the font-weight property and specify the required value (normal, bold, boldest, etc.)
Now you know how to create webfont kit and it can be successfully used in the theme.
Our Tech support is always ready to assist you! Just submit a ticket via our Help Desk in case you get any questions with creating a webfont kit.