Woopy - Best WooCommerce WordPress Theme $69 $39

View Now
Skip to content Skip to sidebar Skip to footer

How to Create Webfont Kit Using Font Squirrel Generator

Fonts Squirrel

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.

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.

For the Updates

Exploring ideas at the intersection of design, code, and technology. Subscribe to our newsletter and always be aware of all the latest updates.

Leave a comment

Download a Free Theme