In this quick tutorial, I’ll show you how to convert a custom font for web use in CSS. We’ll be using Font Squirrels @font-face Generator. These fonts work well with most all modern browsers that I’ve tested. You may run into a few older browsers that reject them, but you can set those to a fall back system font type (e.g. Arial or Times New Roman).
You will be generating the following font face formats:
- TTF – Raw TrueType file, designed to look good on-screen.
- EOT Lite – EOTs are only supported by Internet Explorer. This EOT type is uncompressed and is the same filesize as a TTF.
- EOT Compressed – EOT compressed with LZ compression. File sizes are often smaller than WOFF. Special thanks to Richard Fink and Philip Taylor for creating the excellent EOTFast app.
- WOFF – Cross-browser, web-only font format that uses gzip compression. IE9+, FF3.6+, Chrome 5+
- SVG – This is an XML format required by iOS devices before version 4.2.
- SVGZ – This is gzipped version of SVG.
Step 1 – Choosing Your Font Face
When choosing a font for web you’ll want to pick one that is legally eligible for web embedding. If the generator determines its illegal to convert then it will get rejected. You can also choose from several prepackaged @font-face kits on the site to save you the trouble.
Step 2 – Uploading Your Font For Conversion
The Font Squirrel Generator allows for multiple font uploads and will stack them prior to conversion. Simply click the Add Fonts button and select your font file. Nearly every font format will be accepted for conversion.
For this demonstration, I’ll be uploading Airplanes in the Night Sky Regular, downloaded from daFont.com. I’m currently installing the font on a clients bakery website to give it more of a whimsical design.
Step 3 – Download Your Font Kit And Extract Necessary Files
Check the the agreement and click Download Your Kit. If there are any reported legality issues with your font face this won’t work. The file should download as a ZIP file directly to your desktop or default download folder.
Once you’ve download the font ZIP file go ahead and extract it to its own folder. You can do this by right clicking the font ZIP and selecting Extract All.. (Windows Vista)
The font folder should show up next to your font ZIP file. Open the folder, and it should look similar to the screenshot below.
Step 4 – Utilizing The Font Files And CSS Code
Utilizing the font code is straight forward and easy to understand if you are familiar with CSS. You will not need some of the files in the folder because they are part of the downloaded sample. Click the HTML document. When it’s open in a browser it shows a working sample version of the embedded font.
To transfer the font to your own project, copy all of the font type files to your web site (EOT, SVG, TTF, WOFF, etc..). Place them wherever you would like, but keep in mind you will need to know the absolute or relative address to them.
Open stylesheet.css from the font download. Copy the @font-face styles over to your own web project’s CSS file. Below is a screenshot of my @font-face copied into my project stylesheet. You can see how I styled my headlines (h1,h2,h3) directly below the @font-face CSS
Thank you for reading. Enjoy using your new custom web fonts!