Installing Fonts • Troubleshooting Fonts •Using Fonts with Special Features (OpenType) • Color Fonts (OpenType-SVG)
What are Webfonts?
Strictly speaking, webfonts are custom fonts that are embedded into your website's code. That means that instead of being limited to core fonts like Arial, Georgia, or Times New Roman, you can use custom fonts to customize the look of your site headers and article text- a perfect way to help your website stay on-brand! When you purchase a Webfont License on Creative Market, you can use that font in your website's code using @font-face. Read further to learn how!
Which webfont formats do I need?
Webfonts come in a variety of formats, and each format was built to support a specific web browser. Depending on which browser(s) you'd like your website to support, you'll have to consider which webfont formats to use in your website's code. Here's a shortlist of the most common formats:
- OTF / TTF: OpenType font and TrueType font. These common desktop formats also double as webfonts that are supported by most modern browsers.
- EOT: Embedded OpenType. Only webfont recognized by Internet Explorer 8 and below.
- WOFF / WOFF2: Web Open Font Format. A compressed format similar to TTF / OTF, this format loads quickly on a webpage. WOFF2 is a newer version of WOFF.
- SVG: Scalable Vector Graphics. Large in file size, this format isn't ideal for large amounts of text, but it's the only webfont format for iOS Safari 4.1 and below.
You can learn more about webfont formats on our blog or in this resource.
How to Use Webfonts on your Website
If you've purchased a Webfont License, here’s a basic guide on how to use Webfonts on your website using @font-face:
First, unzip the font product files.
When you’ve been able to open the files and folders, look for the webfonts. (See the list above for some common webfont formats that may be included; Shop Owners may include one, some, or all of these formats.) Sometimes, Shop Owners will include a folder called “Webfonts” or “webfont-kit”. Note: If you do not see specific webfont formats you need and have purchased a webfont license, not to worry! You can create a webfont kit with this tool.
In the webfonts folder of your webfont kit, you’ll see a number of files in various formats:
These include files in TTF, WOFF, EOT and SVG format. Select all of the files in these formats and copy them to your website’s CSS folder. Also copy the stylesheet.css file to that same main CSS folder.
In your website's main HTML folder, link your font’s stylesheet with this code:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> |
(If you have renamed your font’s stylesheet to something else like, “fonts.css” make sure this line of code reflects that change.)
@font-face { |
(Note: If you decide not to include certain formats (such as .svg), simply omit this line in your CSS.)
Copy the property found in the font-family: parameter (i.e. capriccioplain). You need to use this name to describe your font.
In your main website stylesheet, you can use this font name if you want to add it to a specific css selector. For example, if you’d like to use this font on the h1 tag, create a declaration for h1 in your main stylesheet, like this:
h1 { |