Published on: 17 Aug, 2013

CSS3 Embedding Web Fonts

Tumblr Digg Google Plus

There are couple ways on how to embedding web fonts to your site. One of the popular way is by using font hosting service. One of the example is using Google Fonts, they offer more than 500 fonts available to choose. You can check quickly on quick tutorial in css section on how to use google web fonts.

Right now, we will be more focusing on hosting the fonts file on your own hosting server. There are couple fonts extension types available. They are listed as below:

Fonts Format Browsers
Web Open Font Format (.woff) Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, Opera 11+
TrueType (.tff) and IpenType (.otf) Chrome 4+, Firefox 3.5+, IE 9+, Opera 10+
Scalable Vector Graphics (.svg) Chrome 17+, iOS 3.2+, Android 3+, Safari 5+, Opera 11+
Embedded Open Type (.eot) IE 4+

WOFF, TTF and OTF are the most popular web fonts choice format to use.

How to use @font-face basic syntax

This is the basic syntax on how to use it.

		font-family: 'My font name';
		src: url('fonts/fontName.woff') format('woff'),
		src: url('fonts/fontName.ttf') format('truetype'),
		src: url('fonts/fontName.svg') format('svg'),
		src: url('fonts/fontName.eot')

	/** this  is how you use it ***/
		font-family: 'My font name';


There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.