HTML 5 and CSS3 offers new features in ‘Fonts’, these features are lot more effective comparing to the existing CSS2 ‘fonts’ properties. Lets have an in-depth look at it.
- One of the major property/feature in CSS3 is using Custom fonts in websites.
Using custom fonts were restricted in CSS2 and were limited to some fonts such as ‘Arial’,’TimeNewRoman’,’Verdana’ etc... therefore we had to use javascript/jquery as an alternative solution. There came the time to take a deep breath for web-developers, Yes! W3C (World Wide Web Consortium) came up with their update in CSS as CSS3 which was a remedy for using Custom fonts too.
There are two ways of using Custom fonts
- Using our own fonts
- Using google webfonts (this has a wide range of fontstyles)
These two works in all browsers Firefox, Chrome, Safari, Opera, IE5+
- Using our own fonts
- Upload the font file(s) you want to use to the(your) server.
- CSS3 can renders several font formats: “truetype” (ttf), “opentype” (otf), “embedded-opentype” (eot) and “scalable-vector-graphic” (svg,svgz).
- IE versions use .eot font type
- In order to use a font, we must first call it using the ‘@font-face’ attribute and this must be done for each individual font we wish to use.
- See the below sample code
/*Note : This is the way you declare and make the font to your site */
@font-face{
font-family:your-font-name;
src:url(‘/my/font/location/fontfilename.ttf’) format(“truetype”); /*Non IE*/
src: url(‘/my/font/location/fontfilename.eot?#iefix') format('eot'); /*IE */
}
Note: I have used an IE hack which is highlighted in green to use the custom font above ‘’
/*The next step is using the font as you would do to anyother */
.selector{
font-family:your-font-name; /*this should be similar to what you’ve given above*/
}
Enjoy!
View : Demo
- Using google webfonts
- Go to : http://www.google.com/webfonts
- Then select the font, add it to our collection
- Click ‘Use’ button in bottom to get the generated code for your selected font code ViewImage
- and then copy the code in step 3 and 4 to your HTML file and CSS file respectively. ViewImage
eg:
- This is HTML code in step3 which is supposed to be placed in your tag
head>
link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive&v2' rel='stylesheet' type='text/css'>
link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive&v2' rel='stylesheet' type='text/css'>
- The next is to place your CSS in the particular selector
.yourSelector{
font-family: 'Cedarville Cursive', cursive;
}
Enjoy!
View : Demo
2. Font-Stretch is the next feature in CSS3
- The property is ‘font-stretch’
- and meny values such as:
- normal
- wider\narrower
- condensed
- expanded
- inherit and more...
- Sadly :( this feature doesn’t support propperly in any of the major browsers
3. Another useful feature is ‘Font-size-adjust’
- Which allows you to specify an aspect ratio for your text when font fallback.
What is it ?
You give a font-family to your element such as
font-family : ‘Trebuchet MS’,’Times new roman’,’Georgia
- Which means go for ’‘Trebuchet MS’ initially if font is not available go for ’Times new roman’ and so on,
- So just in-case if the first font is not available it loads the second one , this sometime causes to break the styles/ neatness of your site, because aspect value (x-height) in each font type differs so
- To avoid and overcome this issue CSS3 has come with a cool property ‘font-size-adjust’
- this allows you to use the same aspect values when a font is fallback
- View :Demo
