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