CSS3 Embedding Web Fonts

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.

Back to couple years ago before CSS3 is introduced, we have to manually specify the altering color to row background. This can be done in two ways. The first option is to add the style directly to the tr tag. While the second option is to add a css class into the row tag and define what will be the style for that css class.

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.