Custom Css Fonts

Fabulous Fonts


So, have you ever thought to yourself “Arial is exactly the right font for ALL my webpage needs”, or maybe “If Times New Roman doesn’t look right, I can always use comic sans”? You better not have. Arial is good sometimes, and comic sans is good if you have a fancy for exile, but for every other typography appreciating human type person, we have options on the web. In comes @font-face in css.

For @font-face to work, you will need:
-a font-file, or font to reference
-a css style sheet
-text to test your font on

Your font file should be in .ttf format. This is known as true type font, and is supported by all browsers except internet explorer (which I do not go out of my way for when it comes to design).

Don’t know what you’re doing? It’s Fine!
I will walk you through it and provide you resources to use.
The simplest way is probably to use Google WebFonts. They provide a large library of easy to import fonts that they already have import code written for you. while you coulddst use their code, it is important to know what it means. Hah. Haha. It’s a pun. Get it? You will. Anyways…

You can also look up free web fonts to use and write the code to use them in your web page yourself. This is slightly more complicated but will also allow you to use a wider variety of fonts, and even allow you to create your own and use them(I will not be covering that at this time).

Basically, each process works on css so that it can be applied to multiple pages. There are ways to do it in html, but that won’t give us the calability we desire.


@import can be used in css in order to pull another stylesheet into the one you are using. This is the method you should use for google web fonts. The code will look like this:

@import url(;

font-family: 'Petit Formal Script', cursive;

Again, that code goes IN YOUR STYLESHEET. Between your \ tags if you are doing an internal style sheet, or in your .css file if it is external. The p element can be any class, id, or element that you are specifying in css.

If you notice in the code that Google gives you, there is a url function and inside there is a link ending in .css (the ?family= is an identifyer that can be used to dynamically change the contents of files).


@font-face will be placed in css just like @import, only this time you will write the file import code yourself (from template), instead of google putting it in a stylesheet for you. It will look something like this:

Using educational code from w3schools:

font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */

font-family: 'myFirstFont', 'sans';

this example is for two font files (the .eot is a fix for internet explorer, if you can find an eot of your font) that are in the same folder as your web page. You use the font-family attribute just as you would with the @import method or any other web font, such as arial, times new roman, or yes, even comic sans.

Searching the internet, you can find plenty of high quality, free fonts. I usually like to find articleritten by designers that compile a bunch of different free fonts and link to them, such as this one

-Zac David M
zac’s page

~ by zacdavidm on September 17, 2012.

%d bloggers like this: