web project

Adding a Custom Font

One of the big changes in web design that came with CSS3 is the new "font-face" property. This property allows us to actually download a font along with the HTML and CSS when the user downloads our page. Unless you're using a Google font, we do this by accquiring a font from the web, creating several versions of that font, making a "font-face" rule in a style sheet, and then indicating through our CSS styles exactly which parts of the page display the new font.

1 Go to fontsquirrel.com (or any other online font library) and choose a font you would like to add to your site. Make sure the font has a license that is appropriate for what you want to do with it. Download the font to your site folder in a folder called "fonts."

2 The font you downloaded could be any of four different kind of font formats: eot, svg, ttf, or woff. Different browsers expect to see different kinds of font formats, so you're going to need to have several kinds available. On fontsquirrel.com click on the webfont generator page, then find the font file you downloaded in step 1 and upload it to the generator. Click the checkbox where it says "Yes, the fonts I'm uploading are legally eligible for web embedding," then download the kit.

3 The font kit you've downloaded has four versions of the font, licensing information, an html file that shows how they look (the specimen sheet), and a stylesheet that has the language you need to add the font to your pages. Move this collection of files to your fonts folder if it isn't there already.

4 Back in Dreamweaver, open or create the page that is going to use this new font. In the CSS controlling this page (in either the <style> tag or the external style sheet) insert this code:

@font-face {

font-family: 'open_sansregular';

src: url('opensans-regular-webfont.eot');

src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#open_sansregular') format('svg');

font-weight: normal;

font-style: normal;

}

Or attach the stylesheet file in the font kit (the one with the .css extension) to your page using Format > CSS > Attach Stylesheet.

5 In Dreamweaver, open this same font kit stylesheet and look for a line that says "font-face" and copy the font name that you see there.This is the name you are going to use to add the font to either a part or all of your page.

6 In the <style> tag or external css file that controls your page, add a font-family property with the new font's name to whatever part of the page you want to change. If the font is going to appear everywhere on the page, add it to the <body> tag like this:

body {

font-family: 'open_sansregular';

}

If you wanted to add it to only to links or buttons that appear on a specific part of the page (like a <nav> area or an <h1>), configure it like this:

h1 {

font-family: 'open_sansregular';

}

Note: you are going to have to add the link to the stylesheet seen in step 4 to every page that uses the font.