How to Use Webfonts on Your Website

How to Use Webfonts on Your Website

You’ve found an awesome font and you want to use it on your website. Now what?

First, make sure you purchase the webfont version of your desired typeface! In order for the font to work properly on the internet you must use this version! Plus, buying the webfont version provides you with the proper license, which is extremely important!

After you purchase your webfonts, you’ll want to download them. From there it’s time to upload them via FTP to your website. My suggestion is to upload them to a new folder called webfonts that is in your theme’s directory (wp-content > themes > YOUR THEME).

Now go and edit your CSS file. Copy and paste the following for each typeface:

@font-face {
font-family: 'FONTNAME';
src: url('webfonts/FONTNAME.eot');
src: url('webfonts/FONTNAME.eot?#iefix') format('embedded-opentype'),
url('webfonts/FONTNAME.woff') format('woff'),
url('webfonts/FONTNAME.ttf') format('truetype');
}

Save your CSS. Your fonts are ready for use!

If you want to use the font, declare font-family as you would normally. For example:

h1, h2, h3, h4, h5 {
font-family: FONTNAME;
font-weight: normal;
font-style: normal;
}

In the above instance, all your headings will display as your webfont. That’s it! Go through this process for every webfont you’d like to use.

Comments

Leave a Reply

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