CUSTOM WEB FONTS

Before you start, open this page in Firefox, Chrome, and Safari.

HOW TO LOAD CUSTOM WEB FONTS THAT ARE LOCALLY HOSTED

What is this? In this example, I'm using @font-face for custom web font files (woff), and declared in a 'fontname.css' file. Troubleshooting tips: Double check each font path for each individual font!

STEPS
1. Find a custom web font file by sourcing from an indie type foundry
2. Custom Web Font > Download the webfont 'woff' files (and .css file ideally), on the foundry website.
3. If it's a TTF or OTF > then check license > if it's open-source and non-copyrighted, then use a Webfont Generator to generate a web font package.
4. Add your woff font files to a /fonts subfolder of your website project.
5. Add @font-face to your css (internally or externally).
6. or Add a fontname.css file to your /css subfolder.
7. Ensure your font names are declared in your CSS and targeted in your styles.
8. Be patient!

Having troubles? On Desktop > Right click on this page > select 'inspect' > Select the 'element icon' > see how to integrate into your project.