Understanding the fundamental of typography for the web: @font-face Part 2

Typography is a great thing to accomplish if you’re looking to become a web designer or graphic designer. When first starting off it may seem as if you just can not get it together with line-height, what type of font to choose and etc. As you work with typography and fonts, and codes you start becoming interested in what can be done. Well in part 2 of this series I will introduce to many the @font-face technique. If you’re not sure what font-face is or how to use it do not worry because after this article you should be ok.

What is Font-face

For those of you who do not know what font-face is let me explain. Font-face is a web standard technique that allows you to embed fonts of your choice that may not be available on others computers. If you are one those designers who find crazy looking fonts or clean fonts you will love font-face because you can implement the font into your actual site without using images or flash. Font-face gives you the ability to upload any font of choice, of course you have to look at the font permission, and lets you use the font as a substitute. Many designers use font-face for headings and titles.

How to use font-face

Font-face is very easy to use once you get familiar with it. The way I will show you guys today should be very easy to remember considering they’re basic steps. First thing is first, head over to Dafont and grab a free font. Then once you have your your font head over to Font Squirrel and upload your font.

Upload Font-face

Upload Font-face

One you have your kit downloaded you should have a folder with 6 files in it. Double click on the index.html file to see if the font is working correctly. We will only need the 4 font files. After you have your 4 fonts file open up the style.css and copy in the font-face code to your stylesheet.

If you place font files in a folder be sure to change the path of the fonts!

After you have place the font face into your stylesheet and have place it into the main directory or a folder you can now test it to see if it works. The font I used was Market Deco so to call it in my css file I would apply it to a heading like below.

font-face working

You should now have a font-face working and ready to go. If you have any questions or encounter a problem just leave a question below and I will be sure to answer it. Happy coding!

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply