Days
:
Hours
:
Minutes
:
Seconds

Ready-to-Use Website Service $510 $395

Get Now
Skip to content Skip to sidebar Skip to footer

How to Create Webfont Kits Using Font Squirrel Generator

How to Create Webfont Kits Using Font Squirrel Generator

When adding a custom font to a theme, we need to generate a web font kit, which would contain font source files and a stylesheet with @font-face rules. The easiest way to create it is by using an online generator. In this tutorial, we’ll cover the use of the Font Squirrel Generator and Design Bundles Discount Code.

For more on Adobe glyphs see this article.

Generate Archive

Upload the font source files (.ttf or .otf formats) into the Squirrel generator:

After the fonts are uploaded, 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 font is going to be used for multiple languages, specify the additional subsetting options under ‘Custom Subsetting’:

In the end, don’t forget to check the agreement box. Once checked, the download button appears.

Download the archive and extract its contents into a folder.

Editing stylesheet.css

Open the stylesheet.css file, and find the font-family value. Make sure that the name of your folder is the same as the font-family value.

If you have multiple font weights, make sure each @font-face rule has the same font-family value.

Depending on each font style, edit the font-weight property and specify the required value (normal, bold, boldest, etc.)

Before:

After:

Save the stylesheet.css after you make the changes.

Congratulations! Now you’ve got a proper @font-face kit that can be used successfully in a theme.

Our Tech support is always ready to assist you! Feel free to submit a ticket via our Help Desk in case you get any questions or difficulties. 

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.

2 Comments

  • wells fargo bank login
    Posted Feb 23, 2018 at 3:42 pm

    Great blog you have here but I was wanting to know if you knew of
    any forums that cover the same topics talked about in this
    article? I’d really like to be a part of online community where I can get
    responses from other experienced individuals that share the same interest.
    If you have any recommendations, please let me know.

    Appreciate it!

    • Post Author
      Taylor Macallan
      Posted Feb 26, 2018 at 8:47 am

      Hello, Kent, thanks a lot for your attention and we’re happy that you found our post to be useful!
      We would like to recommend stackoverflow.com, if you’re interested in web design and web development forums!

Leave a comment

Download a Free Theme