Practical steps for Use Any Font in WordPress or Any Website

24 Jan

What is @font-face?

Font Villa - @font face - web fonts - font faces - creative fonts

@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 villa font face kit web fonts

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.

Candela Font Face

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

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

Subscribe to my Blog Feeds.

Wordpress SEO Developer

About these ads

5 Responses to “Practical steps for Use Any Font in WordPress or Any Website”

  1. Buy Backlinks January 26, 2011 at 9:01 pm #

    Interesting layout on your blog. I really enjoyed reading it,I will be back to read more in the future.

    • Font Villa February 2, 2011 at 12:46 pm #

      Many thanks to you. Hope you can enjoy further reading.

Trackbacks/Pingbacks

  1. CSS Resource – CSS3 Goodies that all web designers need to know « CSS Resources - January 25, 2011

    [...] now the time has changed for embeding the fonts. We can use @font-face css3 Technique/Rule to embed fonts into the webpage that can be natively rendered by web browsers itself. With this rule [...]

  2. Tweets that mention Practical steps for Use Any Font in WordPress or Any Website « fontvilla – html fonts codes -- Topsy.com - January 26, 2011

    [...] This post was mentioned on Twitter by Tejas Suthar, Tejas Suthar and Tejas Suthar, Tejas Suthar. Tejas Suthar said: Practical steps for Use Any Font in WordPress or Any Website http://bit.ly/f4PkPC [...]

  3. Use Any Font in WordPress or Any Website « fontvilla – html fonts … » Web Coding Unravelled - February 1, 2011

    [...] here: Use Any Font in WordPress or Any Website « fontvilla – html fonts … Related Posts:How to modify WordPress article Font Size « fontvilla – html fonts … On the [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: