Tutorials

How to embed webfonts into your website Part 2/3

In our last article we showed you how to download a basic font file from www.fontsquirrel.com and add it to your computer's Fonts folder so that it appears in design and word processing programs. In this article we'll build on this by showing you how to properly use an online web fonts builder to download the files you need to include in your website's root folder so that they will show up on web browsers.

We'll start with using the web font building kit that's included on the font squirrel website. To use this you'll need to have either the .otf or the .ttf file you downloaded already. On the font squirrel website at the top of the page we'll select the Webfont Generator option.

a1

This will bring you to a page to add your font file so that it can be converted into the correct formats Dreamweaver needs to display the font online. Click the “Add fonts” button and select your font from where you saved it. We stuck a copy on our desktop to find it easily. Also make sure to keep the Optimal option selected. When you've added your font file, a Download kit option will appear. Selecting this option will convert your font file into a web font kit and after the process is complete prompt you to save this new kit. We saved ours to the desktop for the moment.

a2

If you have a look inside of the contents of the folder you just downloaded, you should see quite a few files. We'll be using 4 of these in the CSS portion of our Dreamweaver site to embed them. Next we have a site root folder made on our desktop for a website called “Roadsters”. We'll go into this root folder and create a sub folder called “Fonts”. You may have your website's root folder somewhere else, which means you'll have to change the directory path of the fonts folder once you access Dreamweaver.

a3

We'll then go back the web font kit folder we just downloaded and copy the following files (SVG, TrueType, EOT and WOFF files extensions)

a4

We'll then paste these into the fonts folder we just created in the root folder of our Roadsters website. With the fonts in the root folder it's now time to open up Dreamweaver and finish the final embedding of the Oswald font to display online.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image