Practical steps for Use Any Font in WordPress or Any Website

What is @font-face?

@font-face web fonts Source

@font-face is a css3 rule/technique by which allows us to embed fonts through css rule. With this, you can embed any true-type fonts or open-type fonts in wordpress or any of your website very easily.  With this technique we are able to use our local fonts instead of users installed fonts on his/her browser.

Advantages of using @font-face

• Rely on browser rendering, the same as with web safe fonts
• Cufon/Sifr are really the good in approach but css support is incomplete
• Cufon/Sifr techniques must be implemented with java script support  ( a great dependency )
• Its really easy to embed fonts with just @font-face rule in stylesheet
• Much better options are available as compare to Cufon / Sifr

These are web fonts and can be integrated to web page with very much ease. Here is a simple tutorial for implementing font face fonts on your webpage.

Let’s Try it

Note: This method work for almost all morden browsers. ( not tested yet, but you can see below for the browser support  )

Important!

Fonts must have a Web-Font License! You  can check the Web site you are downloading or purchasing the font from.

Step 1) Grab the font Files

You need to download the @font-face kit for more than 400 font styles from this website. They had a section for face kit download.

Font face kit - Source

Each @font-face font kit  will come with below files in it:

• TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
• EOT fonts for Internet Explorer 4+
• WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
• SVG fonts for the iPad and iPhone
• Cufón fonts in case you want them in it
• Demo.html and stylesheet.css so you can get going fast

For this example I’m using Candela-fontfacekit

Step 2) Place font files into web directory

With this step, after downloading the fonts kit, we need to put four kind of font files ( in my case )

1. CandelaBold-webfont.eot
2. CandelaBold-webfont.svg
3. CandelaBold-webfont.ttf
4. CandelaBold-webfont.woff

it on our main directory of our website. Or you can put it on webserver anywhere you want but you need to be aware to locate them into css file.

Step 3) Define the @font-face

Now open your stylesheet for your website. Paste below css rule for giving the reference of the fonts.

@font-face {

font-family: ‘CandelaBold‘;
src: url(‘CandelaBold-webfont.eot‘);
src: local(‘☺’), url(‘CandelaBold-webfont.woff‘) format(‘woff’), url(‘CandelaBold-webfont.ttf‘) format(‘truetype’), url(‘CandelaBold-webfont.svg#webfonta8W2vKU6′) format(‘svg’);
font-weight: normal;
font-style: normal;

}

You need to make little change on this snippet in order to work the snippet for your side.

1) You need to green colored text to your suitable font name you can use in your stylesheet

2) All four red colored font name to your fonts you have downloaded.

Step 4)  Use defined @font-face

Now you can use your fonts anywhere in your css from where you want to give effect. For example you want to use these fonts for h2 tags then you css would be like below I have described here.

You can add this style into your h2 tag. If its not available then you can add your own with below code.

h2{

font: 11px/16px  CandelaBold, Helvetica, Arial, sans-serif;

}

below is the example of the @font-face css code technique.

Step 5) Demo will look like this text.

Step 6 ) Don’t forget to like My Facebook Fan Page

Step 7) And you’re Done. Any Questions?

Let me know if you have any queries regarding above steps. You can send me a comment below for quick solution of your queries/questions.

Let’s see some of the @font-face examples

• http://177designs.com/
• http://randsco.com/index.php/2009/07/04/p680
• http://www.miltonbayer.net/ATfont-face/
• http://jigowatt.co.uk/
• http://speaktheweb.org/
• http://forabeautifulweb.com/
• http://craigmod.com/journal/font-face/

See @font-face Video

Refresh Columbia – 2/24/10: @font-face presentation from Jay Barry from Unmatched Style on Vimeo.

@font-face browser support

Till date this @font-face rule is supported by below browsers.

• safari 3.0

1. OpenType/TrueType ( .ttf  )
2. OpenType PS (.otf)
3. SafariMobile (iPhone/iPad)
4. only SVG Fonts until iOS 4.1
5. TrueType/OpenType since iOS 4.2
6. Wiki: Code samples

• Mozilla/Firefox

1. since Firefox 3.5
2. font formats
3. TrueType/OpenType TT (.ttf)
4. OpenType PS (.otf)
5. WOFF (since Firefox 3.6)
6. Wiki: Code samples

• Google Chrome

1. In Chrome 4.0 stable release. As of January 25th, 2010
2. In Chrome 3.0, you could run the executable with a command line switch of: --enable-remote-fonts
3. It was disabled by default for security review
4. TrueType/OpenType TT (.ttf)
5. OpenType PS (.otf)
6. WOFF since version 6

• Internet Explorer

1. since IE 4
2. Embedded OpenType (EOT) created by Microsoft’s WEFT tool
3. WOFF since IE9
4. Wiki: Code samples

• Opera

1. since Opera 10
2. TrueType/OpenType TT (.ttf)
3. OpenType PS (.otf)
4. SVG (.svg)

• Netscape

1. since version 4, discontinued since Netscape Navigator 6
2. Portable Font Resource (.pfr)
3. more info: http://en.wikipedia.org/wiki/TrueDoc

More information on css3 @ font-face resources

• Web Fonts with Font Face
• CSS Fonts Module Level 3
• Font Sprint @font-face page

Subscribe to my Blog Feeds.

About these ads