Just a few short years ago, the web design world was a different place. There was Flash everywhere, with constant updates to your browser to install the newest version. Websites were made mainly with sliced up images, and the only way to incorporate custom fonts or typography was to use images, such as PNG or Gif. If you wanted a lean site that was fast and easily usable, you would be stuck with the basic system fonts. You had to worry about fonts not being installed on the user’s computer and other conflicts. Today the scene has changed, because of a lot of progress in web design and development. No longer are we forced to use the same fonts over and over again. We aren’t limited to a handful of fonts. Now we have an endless library of fonts at our disposal to create just the right presence on our websites. You implement these fonts using @font-face.
Using @font-face In Your Websites
Believe it or not, this isn’t as hard as you might think. If you are new to web design, this may not make much sense to you, but bear with me. One site that I like to use when looking for a wide variety of fonts to use on the web is Font Squirrel. Font Squirrel has a vast library of web fonts, so you can be almost 100% sure to find something to use that will fit your project.
The reason I like Font Squirrel so much is because they automatically offer you the @fontface files and CSS for every font on their site. Let’s say that you are going to use Alex Brush on your web design project. If you click on Alex Brush, it will take you to page like the one shown below.
From this screen, you can test drive how your font will look before you spend time downloading and setting everything up. The other big thing to take notice of is the @font-face Kit section to the far right. this will allow you to download the common web font formats.
Font Squirrel includes all of the necessary files and formats to insure that they work on all modern browsers. These should Work in Safari, Opera, Firefox, Chrome, and recent versions of IE. Below, you can see the files that you will receive upon download. These files are delivered to you via zip. The best way to implement the font is to drop this folder into the root folder of your site. To simplify things later, you might change “alex-brush-fontfacekit” to something easy like “alex”.
Double-click the file called stylesheet.css and you will find the CSS to introduce this webfont into your site.
The reason I told you to name the font folder something quick and simple, is because now you need to copy this, and paste it at the top of your website’s main stylesheet. Then, add alex/ in front of the name of each font, like in the example shown below.
Now, when you want to use the webfont in your site, you simple use the same name as the first line in the example css, which is AlexBrushRegular.
Conclusion
Now that you have introduced the font into your site, you can implement it anywhere. @font-face is handy, because you can use almost any font you can imagine. Using @fontface is great and allows you to create flexible, beautiful web design work that has much more emotion and personality than the sites of just a few years ago. Do you use @font-face? Or do you prefer a different method? Share your experiences with @font-face in the comments section below.
