Using Custom Fonts for Your Websites

If you’re a designer you may want to check this out, or even use this. ever heard of @font-face(well let me introduce breifly)@font-face is not exactly a feature which is new to CSS 3 world, since CSS 2 it has been proposed by and has been implemented in Internet Explorer ever since ie 5, the thing is IE still rely on open Type (.eot) format which is no other browsers decided to use. then here comes True type (.ttf) which comply majority of the browsers(not to mention safari supports both type format (.ttf and .otf) in their pages haha…)

enough said… here’s how we do it

Okay, each form of the font family must be declared using the @font-face syntax; for example, i want to use “Calibri” as my global font, I should place it on my CSS stylesheet this way:


@font-face {
font-family: ‘Calibri';
src: url(‘font/Calibri.eot’) format(‘eot’),
url(‘font/Calibri.ttf’) format(‘truetype’);
}

as you can see I placed those font on a “font” directory. if you place those font formats somewhere else, just change the directory.
this –> ‘font/Calibri.eot’ to be change with –> ‘-directory-/Calibri.eot’ (do the same with ttf)

Then on your CSS stylesheet call it using font-family:

h1,h2,h3,h4 {
font-family: ‘Calibri';
/** and more elements here **/
font-size:2.3em;
font-weight:bold;
/** etc **/
}

p {
font-family: ‘Calibri';
/** and more elements here **/
font-size:1.3em;
font-weight:bold;
/** etc **/
}

Note: some fonts don’t have their open type (.eot) formats so here’s a link than may help you convert those (.ttf) to (.eot) formats. http://ttf2eot.sebastiankippe.com/

wholla! that’s it :D hope it help… enjoy

This entry was posted in Recent Posts. Bookmark the permalink.

7 Responses to Using Custom Fonts for Your Websites

  1. Aurelio says:

    Very interesting, but I’m still frightened by the incompatibility of the browsers, which seems to me unacceptable!

    • admin says:

      Hi Aurelio, thanks for droppin’ by, we’ll eventually as of now all latest browsers support font-face. :) try it out. :)

  2. Venkat says:

    Interesting . thanks for info

  3. Sander says:

    First of, your site looks brilliant.

    @fontface, read a lot about it but never tried it. With this clean and clear explanation it’s time to give it a shot. Thanks for this!

  4. Cindy says:

    Does this work in WordPress? I installed a fresh copy of wordpress and used the default template. I put the css code in the style.css file near the top. However, it didn’t work. What do you suggest? Thanks!

    • admin says:

      Hi there Cindy,

      This will work on wordpress and default template :)… if it didn’t work maybe you would like to double check the directory where you put the fonts.. like for example i place it on “wp-content/theme/twenty-eleven/font” so on the twenty-eleven default style css sheet i can put this code below:

      @font-face {
      font-family: ‘Calibri’;
      src: url(‘font/Calibri.eot’) format(‘eot’),
      url(‘font/Calibri.ttf’) format(‘truetype’);
      }

      2nd thing is to check whether the fonts your using is an eot format or a truetype format..

      3rd try to check whether you call the fonts the right way
      for example you should call it like this

      #header h2 {
      font-family: ‘Calibri’; {

      /** the font is opened and closed with an apostrophe **/

      4th’ly try to double check the apostrophes, commas, semi-colons on your code..

      5th if this didn’t helped at all maybe you can send me the link of your site.. :) have a great day.. :)

  5. patricia says:

    Must say this is great. I was in need of something like this..Now I can use the fonts i want!!!!

    thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>