Embedding Custom Web Fonts Using CSS3 @font-face Rule

CSS3 and HTML5 have started conquering the Web for last couple of years and continue to stun web community with a wide range of features. Today, I’m going to introduce you to CSS3 @font-face rule. I am sure that many of you might read about it somewhere in this web or have used or are using it or maybe totally new to this.

Font-face, what is that?

Font-face is one of the CSS3 rules which is used to embed custom fonts called Web Fonts in websites or blogs. With the @font-face rule, we do no longer have to use the “web-safe” fonts. Many of you might not aware and will be surprised when I tell that this feature was already implemented in Internet Explorer 4*! You can see the usage of custom web font in header navigation menu of our blog.

@font-face synthax

It is really easy to implement this feature to your website. You have to describe your desired font with the CSS3 @font-face rule. Below is the most basic code to start off with, where the font name and font URL are defined.

@font-face {
    font-family: MyWebFont;
    src: url('MyWebFont.ttf'),
          url('MyWebFont.eot'); /* IE */
    }

@font-face is supported by all major browsers such as Firefox, Chrome, IE, Safari, Opera and iOS but not in the same way. Four different formats need to be included in order to make your @font-face synthax bulletproof, so that it works perfectly in all the browsers. Here is the table which shows the font formats supported by different browsers.

Here is the bulletproof CSS3 @font-face synthax.

@font-face {
	font-family: 'MyWebFont';
	src: url('MyWebFont.eot'); /* IE9 Compat Modes */
	src: url('MyWebFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('MyWebFont.woff') format('woff'), /* Modern Browsers */
	     url('MyWebFont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('MyWebFont.svg#MyWebFont') format('svg'); /* Legacy iOS */
	}

Tell me how to embed it!

Now, I will tell the steps to embed webfont to your site. First, upload your desired font of multiple formats to your server. If you have only one of those formats, Font Squirrel can help you to generate other formats which comes with a help kit in single-click. Those fonts should be uploaded in or near the same directory as your stylesheet.

After uploading the fonts insert the bulletproof @font-face synthax in the codebox above into your stylesheet.css. Replace the “MyWebFont” in that code with the name of your desired font. Now, you need to assign the new font-family to a selector. Here is a sample synthax for selector you want to change. Remember! The name of the font-family in the @font-face and this selector should be the same.

h1 { font-family: 'MyWebFont', Arial, sans-serif; }

And now save your stylesheet and observe the magic of Web Fonts in your site.

Note for Blogger Platform Users

I know there is no way for you to host the fonts in a server unless you own a custom domain with hosting. So, free web fonts services like Google Web Fonts, Kernest, Fonts.com and many more are there to help you.

Have a look at our other CSS3 articles.

• CSS3 Box Shadow effect
• CSS3 Border Radius