Dreevoo.com | Online Learning and Knowledge Sharing
 
Home | Programs | Web services | Web sites | Create @font-face custom fonts for a website
Guest
Click to view your profile
Topics
Programs
Languages
Recipes
Home
Shortcuts
 
 

Create @font-face custom fonts for a website

Font Squirrel is a great online service, where you can download free fonts, @font-face kits and make your own kits with the @font-face kit generator.

 
  Author: mat | Version: | 22nd April 2012 |  
 
 
1.
 

Sometimes when you create a website, you want to add a custom typography instead of browser supported fonts. You can do that with a @font-face CSS method. In order for this fonts to work in all major web browsers, you need a so called web font kit, let's see how to create these font kits using Font Squirrel @font-face generator.

Open www.fontsquirrel.com in your web browser.

 
 
2.
 

You can browse for thousands of free fonts, download already prepared @font-face kits or create your own @font-face and that's what we are going to do now, presuming you already have a font. If not download one.

Click @font-face Generator.


 
 
3.
 

Choose Optimal conversion and select Yes, the fonts i'm uploading are legally eligible for web embedding.

Click Add Fonts.

 
 
4.
 

Now choose the font you have stored on your computer and you want to create a @font-face kit for.

 
 
5.
 

If the conversion went well, a Download Your Kit button appears, click it and save the @font-face kit to your computer.

 
 
6.
 

Find the .zip file you just downloaded and extract it into a folder.

Now you have all the type of fonts (.eot, .svg, .ttf, .woff), so there shouldn't be any problem with web browser support.

You can also click the html document ...


 
 
7.
 

... and see how your fonts looks like in "wild".

That's it, now click here if you want to learn how to put this non-web font on a Wordpress Website.

 
 
 
   
  Please login to post a comment
  Click to open user profile  
NikMan, 23rd Apr 2012, 9:29 PM
Hey mat, that lesson helped me a lot!
 
 
  Click to open user profile  
mat, 24th Apr 2012, 5:26 PM
Great to hear that buddy!
 
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO