How to Embed Custom Fonts in CSS3


In this CSS tutorial, we’ll show you how to add custom fonts to your websites that can be viewed correctly in any browser, using smart coding practices and some free online tools. While compatibility is often a concern, virtually all modern browsers now support the webfonts when coded correctly.

This tip is adapted from the sixth chapter of our CSS Properties tutorial short course by author Ben Jaffe, and we’ve also included the original videos at the end of the post so you can see how he makes it work and get some additional background information, too.


Take a look at the font_face-1.html available in the working files linked above. From a browser, it’s just basic lorem ipsum filler text in two sections, the top featuring a custom styled background box. In the code, we’ve also included a basic font stack (courtesy of for the top section, prioritizing Tahoma; if you’d like to know more about how font stacks work, just watch Ben’s first video at the bottom of the post.


The free resource we’ll be using to choose and adapt our custom fonts is FontSquirrel. For our example, we’ll be using the font Quicksand, which you can find by using the search function or checking the site’s Most Popular section.

You can select Download OTF to put the font on your local drive. You will have a zip file of all versions of the Quicksand font, but the two we will be working with are Quicksand-Regular.otf and Quicksand-Bold.otf, which we have already included for you in the work files.

Now go to the Webfont Generator tab on the FontSquirrel, so we can convert these files for use on our page.


Click Add Fonts and choose both versions of Quicksand (or the font of your choice), and the files will be uploaded into the generator.


If you’d like to reduce the size of your font files, the EXPERT mode on the site will allow you to exclude specific characters that you are not going to use and make other tweaks, which Ben demonstrates onscreen below. But since Quicksand is a relatively small file, however, you may also leave OPTIMAL selected, then check the box stating you have permission to use the font, and click the blue Download Your Kit button on the bottom right.

You’ll get a zip file, containing a webfontkit folder that holds not only your converted fonts with versions for major browsers but also a file called stylesheet.css. Now we will open the file in a text editor to make a few changes.

Rename the font-family property for both entries to Quicksand, and change the font-weight property of the bold version from normal to bold, so that the CSS looks as it does below.


Now, after moving the webfontkit files into the same directory as font_face-1.html, you can copy and paste this CSS code to the header of your original document, just above our custom style for .box

Finally, to activate Quicksand, go back to the Tahoma font stack within our .box style, and add Quicksand to the stack, right before Tahoma, making it the default font.


After saving your changes and reloading the page, you can now see your custom font face!


To watch the full process onscreen, and learn more about font stacks, watch these two tutorials from author Ben Jaffe. The 3.25-hour CSS3 Properties training course can be purchased as a digital download for $24.95 or watched instantly streaming through the Learning Library. It’s just one installment of our full CSS tutorial series led by Ben and other experts.

0603 – Custom Fonts – Part 1

0604 – Custom Fonts – Part 2

Let us know in the comments about more CSS tutorials you’d like to see!



Save $50 when you sign up for an annual Learning Library account Learn More