Published on: 17 August, 2013

CSS3 Embedding Web Fonts

Posted by andy | 1080 views 0 likes 0 favourites 0 comments
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-face{
		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 ***/
	body{
		font-family: 'My font name';
	}
Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 13 July, 2016
Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.
Published on: 24 March, 2016
You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.