Archive | @font-face RSS feed for this section

CSS3 Examples by Johan

8 Feb

CSS3 examples by Johan, covers

  • @font-face
  • css3  box-shadow, text-shadow
  • css3 animation
  • css3 Rgba component
  • css3 transformations
  • css3 gradients

Subscribe to my Blog Feeds.

Wordpress SEO Developer


The state of web type

8 Feb
  • The State of WEB TYPE Auckland Web Meetup  20 May 2010  Matthew Buchanan


  • A seventh-grader writing a book report on Microsoft Word had more font choices than the person designing Esquire magazine’s website or the Ikea online catalog. —D EBO RA H N ET BURN, LO S AN GE LE S TI ME S


  • BROWSER FONTS Verdana Arial sans Helvetica SERIF Lucida Tahoma Trebuchet Calibri Times Georgia SERIF Palatino Cambria


  • IMAGE REPLACEMENT <h1>My Title</h1> h1 { background-image: url(title.png); text-indent: -999em; overflow: hidden; } Any typeface Not dynamic the the GOOD Consistent rendering Typographic control BAD Inefficient Text selection Widest support Images-off issue


  • FLASH REPLACEMENT <h1>My Title</h1> <script> if(typeof sIFR == “function”) sIFR.replaceElement(“h1”, “font.swf”); </script> Reasonably secure Licensing the the GOOD Consistent rendering Wide support BAD Configuration Text selection Text scaling No Apple love


  • CANVAS / VML REPLACEMENT <h1>My Title</h1> <script> Cufon.set(“fontFamily”, “League Gothic”); Cufon.replace(“h1”); </script> Reasonably secure Licensing the the GOOD Consistent rendering No plugins BAD Font conversion Configuration Wide support Screen readers Works on iPhone OS FOUT


  • FONT-FACE EMBEDDING @font-face { } First introduced in CSS2 recommendation Removed from CSS2.1 specification Implemented in IE4, September 1997 —Proprietary EOT format Now in Firefox 3.5, Safari 3.1, Opera 10, Chrome 4


  • Being a web designer will soon require a deeper understanding of typography and how typefaces work.

Subscribe to my Blog Feeds.

Wordpress SEO Developer

The type we want… – FontVilla

8 Feb

Best presentation about typography I have seen. Must see this.

Subscribe to my Blog Feeds.

Wordpress SEO Developer

Rich Typography Options For The Web – Why sIFR is Dead in 2009

8 Feb

Subscribe to my Blog Feeds.

Wordpress SEO Developer

Employing Custom Fonts – FontVilla

8 Feb

Paul Irish is giving presentation about employing custom @font-face on website.  He is talking about below points.

  • embedding @font-face on webpage
  • employing custom fonts
  • wotf, ttf, otf fonts
  • sIFR, Facelift,Cufon, typeface
  • Faas Shops
  • Fonts as a service and more.

Subscribe to my Blog Feeds.

Wordpress SEO Developer

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  )


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
  • 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.


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:

More information on css3 @ font-face resources

Subscribe to my Blog Feeds.

Wordpress SEO Developer