Font-Face

I never knew new coding could be so exciting! CSS3 has made it possible to have customized fonts instead of being limited to the fonts already downloaded by your viewer on their computer. It takes a little work but once you get into the rhythm it is fairly simple.

This is a sample of the code I used to insert a font called Carmella:
@font-face { /* declare fonts */
font-family: “Caramella”;
src: url(“fonts/caramella_regular-webfont.eot”);
src: local(“caramella_regular”),
url(“fonts/caramella_regular-webfont.woff”) format(“woff”),
url(“fonts/caramella_regular-webfont.otf”) format(“opentype”),
url(“fonts/caramella_regular-webfont.svg#webfontsRNpv8j8″) format(“svg”);
}

Let’s break it down:
This code block should be placed at the top of your css page but it doesn’t have to be.
First if you haven’t downloaded the font you want to use do so. But don’t put them on your web server just yet. We have some work to do with them a little later.

The first line to this CSS block is @font-face { /* declare fonts */

On the second line is font-family: “Caramella”; You should put what you want to call the font in your code here. It doesn’t matter what and it doesn’t have to match up with the actual font name but for organization’s sake name it something close to the name of the font and easy to remember.

The second line tells the file path to the font. But a specific font. Because of the loops and holes Internet Explorer takes us through we have to make 4 different font files. But we can do that easily.

Take your desired font file and click on over to Font Squirrel Now send you font through the program by clicking add font and you should end up with four fonts. Take them out of the .zip file and upload them to your web server.

Back to the CSS block. In third line place the file path to the .eot font type.
The fourth line is to place the name of the font as it would be in someone’s computer. Because if you use a font the someone may have already installed on their computer instead of using your font files the code will simply call it up from your viewer’s computer.

Now I suggest when putting in the next three font paths that you do it in the order I do it to keep any bugs or other problems out.
First is the .woff format.
url(“font path.woff”) format(“woff”),

Then the .otf format.

For the .svg format you have to do something special. Open up the svg font file (yes you can do this). Look for the font id. It should be near the top and look something like this <font id=”webfontsRNpv8j8″…
All you would want from this example is the webfontsRNpv8j8

So now we go back to putting the .svg font in our CSS. This time will use a pound sign and then insert the id.
url(“fontpath.svg#webfontsRNpv8j8″) format(“svg”)

And you are done! Don’t forget to close the CSS block with the ending }

To call the font up and use it for your layout, you write font-family:fontname

.content {
font-family:fontname;
}

If you have problems with this let me know.
Some common problems I have run into is not spelling the font right in the rest of my CSS
Not having the file path correct
Forgetting to paste in font id for the .svg font
Or sometimes I need to make sure every little hyphen or coma is in place
It can be good, if you have problems just to run through the tutorial again to make sure you haven’t forgotten anything.