Published on: 17 August, 2013

CSS3 Embedding Web Fonts

Posted by andy | 1591 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-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.
Related Articles
Published on: 20 January, 2018
By default, a table in HTML will contain a default value of cellpadding and cellspacing. This can be easily removed if you are using tag properties attached to the HTML table itself. For example, you can see the following image. I have included a border to the table so we can exactly see the cellpadding and cellspacing applied to the table.
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.