Tutorials

How to embed webfonts into your website Part 1/3

Using external webfonts are becoming increasingly popular online; web designers are expanding the scope of their typography with the inclusion of newer web fonts. Such websites as Dafont, FontSquirrel and Google Fonts all have hundreds of typefaces to choose from.

 

There is a big pitfall however that many designers who decide to code for the web don't realize right away. Manysimply just add the .ttf file extension to the Fonts folder on their computer and expect this to enable the font to work on their coded websites. This isn't the case however as fonts that aren't native to Dreamweaver need to be properly embedded first in both the website's root folder and the Dreamweaver software. Some designers will simply use the Google fonts embed code at the head of their html file to try and circumvent this. This isn't a wise solution though as the Google fonts code will only display fonts on a website that is connected to the internet.

 

This means that if your website is offline for some reason, Dreamweaver will display whichever default font you programmed to display on the site. This is why it's always better to take the time and properly embed the font so that it will display on a website at all times. This article assumes you already have some Dreamweaver and coding knowledge and know the fundamentals of setting up and managing your site's directory. We'll touch on a few basics but will focus more on getting new fonts to work in your Dreamweaver project. We'll also be doing this article from a PC running Windows 8, although the process is the same for whichever platform you're using.

 

We begin by finding a font that we want to use online. We'll visit a font website such as www.fontsquirrel.com and find a font we want to use in our design. If you're lucky, you may find a font that already comes with a web font kit included in which case you can bypass this portion of the article and skip further down to where we go into adding the fonts to your root folder. We'll assume for now though that you can only locate the .otf or .ttf file extensions which are used to add to the Fonts folder of your computer to be able to use the font in a design program such as Photoshop or Illustrator. We already know we want to use the Oswald font so we'll type it in in the search bar at the top.

1

You can quickly see if a font has a web font kit already available by clicking the “Webfont Kit” option above or checking the “Font Filter” on the side bar and seeing if there is an X beside the Webfont option. In both cases this font does not have a web font kit already created so we'll have to make our own later on.

2a

2b

First we'll download the .otf file for this font. You'll find the download link in blue at the top of the page. Sometimes it may be a .ttf file instead – if your font has that one then download that link instead. Doing this will prompt you to download or save a zip file of the font somewhere on your computer.

3

We'll save it to our Downloads folder. After this we'll open up the new folder and look at the files we just downloaded: As you can see the Oswald font comes with Bold, Regular, Light and Stencil options. We only want to use the Bold option so we'll drag/or copy and paste the file for Oswald Bold into our computer's Fonts folder. This can easily be found on your computer by using the search command. This means the font should now be useable in your design programs (although you will have to restart the software if it's currently open to see the font)

4

For the moment we're able to design using this font but in order to actually have the font appear online after we use it in Dreamweaver, we still need to embed the Oswald font in our site root folder and in the Dreamweaver software. We'll take a look at how we do this in the next two articles.

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