Tutorials

How to embed webfonts into your website Part 3/3

In our final article we'll open up Dreamweaver and begin adding code to the external CSS styles document we created for a project called Roadsters. We'll insert a special code into this document to ensure the font will display on web browsers and in Dreamweaver. First we'll go to our styles sheet and enter in a lengthy piece of code that links the Oswald font to the html document we used to code the website. In the screenshot below, you can see the file path linking the Dreamweaver document to the fonts folder we created in the root site folder with the 4 web font extensions we downloaded from www.fontsquirrel.com.  In your own project, be sure to change the name of the fonts in this file to match exactly what they're called in the fonts folder found in your site's root. In our case, the fonts were titled “oswald-bold-webfont” so we'll make sure it says this before each extension. Also keep in mind you can insert this piece of code anywhere in your stylesheet. We prefer to use an external stylesheet but if you usually insert it into the head of your html document it will work the same. Remember: If you didn't place your site's root folder on the desktop or use a fonts folder you will have to replace the file pathway.

Here is the code you need to copy:

b1
Once you've added this into your styles for your font, switch back to the source code view in Dreamweaver and go head and add a tag for a heading, paragraph or something that allows you to add  font to some text. In our example we're going to add the new font to an h6 tag. In here make sure you copy the font name exactly as it appears in the Font-Family field in the styles document. In this case ours is called 'Oswald Bold' so we'll copy this into the Font Family field of our H6 tag.

b4

b5

Now all we have to do is add a H6 to some text in our html document and then take a look in a browser to see if it's working. We previewed the font Firefox, Safari, Chrome and Explorer and sure enough it's now displaying on all popular web browsers. If for some reason your font still isn't working, we suggest to try and restart Dreamweaver or make sure your fonts folder is setup properly for the correct file under Site > Manage Sites > Advanced Settings > Web Fonts in Dreamweaver.

b6

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