Unlike desktop fonts, which are designed for use in documents and in graphic design, WebFonts are their own unique animal, specially tuned to be recognized and displayed by a web browser. Those who have tried to adapt desktop fonts for website use know that it’s really only possible to get clear, precise behavior by converting the font to a graphic. However, by adding WebFonts to your website, your information will look cleaner, more attractive, and most importantly–make it stand out from the pack.
WebFonts are simple to “install” and use, and with even a little knowledge in web design, you can get up and running in just a few minutes. This guide will make this critical design tool easy and accessible.
Uploading WebFonts
While WebFonts are designed to work across all browsers, web designers must have the font in the five necessary formats– WOFF2, WOFF, TTF , EOT, and SVG. YouWorkForThem WebFont kits are sold with all five formats included, so that web designers can simply upload the WebFont kit into the same directory as their CSS files.
Adding WebFonts to Your Stylesheet
Once your WebFont kit has been uploaded, the special CSS command @font-face is used to call upon it. However, designers must be careful to declare all the different WebFont formats to avoid cross-browser headaches.
The code for the stylesheet is as follows:
|
1 2 3 4 5 6 7 8 9 10 11 |
@font-face { font-family: 'ProximaNova-Black'; src: url('proxima-nova-black.eot'); src: url('proxima-nova-black.eot?#iefix') format('embedded-opentype'), url('proxima-nova-black.woff2') format('woff2'), url('proxima-nova-black.woff') format('woff'), url('proxima-nova-black.ttf') format('truetype'), url('proxima-nova-black.svg#ywftsvg') format('svg'); font-weight: normal; font-style: normal; } |
Finally, it is time to tell the stylesheet where to use the WebFont. In this example it is used for all content within the paragraph tag, like so:
|
1 |
p { font-family: 'ProximaNova-Black', Helvetica, Arial, sans-serif; } |
Now, providing the stylesheet is properly linked, the website will start using the designated WebFont that you uploaded.