How to use @font-face

Firstly, you’ll need to find a nice-free font in order to use it on your web page. Graublau Sans Web by Georg Seifert is a perfect font for our example since it’s free and supports many languages. Download the font on your drive and continue…

In order to support as many as possible browsers and devices, we need to first create and then use different formats of our font (.ttf/.otf, .eot, .woff, .svg etc.). There are numerous tools to convert fonts but the best I’ve come across is FontSquirrel @font-face Generator. A free and pretty fast online tool with many options and features that generates all necessary formats from a single font.

After you convert the font in all formats, create a directory named “fonts” and copy all the fonts formats inside it. Create a new html document in the root directory of your web site (on the same level where the fonts folder resides) and insert the following CSS:

@font-face {
    font-family: 'graublauweb-webfont';
    src: url('fonts/graublauweb-webfont.eot');
    src: local('☺'), url('fonts/graublauweb-webfont.woff') format('woff'), url('fonts/graublauweb-webfont.ttf') format('truetype'), url('fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
h1 {
    font-family:"graublauweb-webfont", Helvetica, Arial, sans-serif;

@font-face loads all necessary formats and we set the font-family the same way we would do normally.

Next we insert our simple markup:

<h1>This is a heading with some custom font.</h1>

That’s about it! Test the page in a browser to see the results.

Jigoshop -Free WordPress eCommerce Plugin

Jigoshop is an eCommerce plugin for WordPress developed by professionals with years of experience delivering online shops for global brands.

Set up shop in minutes with physical and downloadable products or even services. Jigoshop provides you with the features necessary to set up an eCommerce web site lickety-split.

With the option to create a multitude of product types and apply detailed attributes customers can easily refine your catalog, ensuring they find what they’re looking for in just a couple of clicks.

There are integrated worldwide payment and shipping options to cater for a global audience.

Inside the custom dashboard you get sortable sales graphs, incoming order / review notifications as well as stats on your stores performance.

Manage your stock levels and customer orders easily. Jigoshop has been engineered to make the boring parts of eCommerce, well, less boring!

Built upon the WordPress core you get all the benefits of this global leading platform: free, easy to use, secure, highly customisable and with a great support community to hold your hand.

Find out more on the official Jigoshop web site.

Download here

WordPress Plugin – 1-Click Retweet/Share/Like


Social Buttons: Shows following 9 buttons on your blog posts
  1. Facebook Like
  2. Facebook Share
  3. Twitter button
  4. Google +1
  5. Google Buzz
  6. LinkedIn Share
  7. StumbleUpon
  8. Digg
  9. Email
Automatically Publish: Publish your Blog Posts to 30 Social Networks
  1. Facebook Profile/Wall
  2. Facebook Pages
  3. Facebook Application Page
  4. Facebook Events
  5. Facebook Groups
  6. Twitter
  7. LinkedIn
  8. MySpace
  9. Yammer
  10. Yahoo
  13. Google Buzz
  14. Socialcast
  15. Plurk
  16. Sonico
  17. Delicious
  18. Diigo
  19. Foursquare
  20. Gowalla
  21. Brightkite
  22. Blog
  23. Blog
  24. Blogger
  25. Tumblr
  26. Typepad
  27. Posterous
  28. Yahoo Meme
  29. Basecamp
  30. Backpack
Plugin also supports `Publishing your Blog Posts to Twitter` via `OAuth`.
%d bloggers like this: