Wanna get creative with fonts for your site? Use WOFF!
I LOVE fonts! I love discovering new fonts. I love playing with different fonts in a headline to see how it changes the feel of something. I love mixing them together to create a bit of word art. Fonts can completely change the look of a site. A light, airy, hand-sketched font can add whimsy, while a big, bold, heavy font adds weight and emphasis to what you have to say. I have hundreds of fonts installed on my laptop and my brain gets a little giddy thinking about which ones I’ll dust off when I start on a new project.
We were recently asked to create a front-end storefront for a boutique website in our website development class. I was excited to take on the task of finding a color palette and fonts for our project. I found a few that I liked and added them to my CSS code under font-family. They looked awesome! One day, during a video meeting, my remote partner shared her screen with me to show me her latest addition to our project. I was surprised to discover that my chosen fonts weren’t showing up on my partner’s computer, just regular old Times New Roman. What?!? I was bummed. Did this mean that I was only allowed to use web safe fonts? Not quite, enter WOFF.
What is WOFF?
WOFF is an acronym that stands for Web Open Font Format. WOFF files are OpenType or TrueType fonts that have been compressed and given a bit of XML metadata. The data helps them stand out to browsers as a web font that needs to be downloaded to the page for display, not just a font that is used locally on one’s computer. The compression speeds up the transfer process between a server and a computer on a network connection.
Why do you need WOFF files?
How do I get WOFF files?
Once you have picked out your TrueType or OpenType fonts you need to convert them to WOFF. There are lots of converters out there. A simple, free one that I found to use was cloudconvert.
Here are your steps for conversion magic:
- Select your TTF or OTF file from your computer
- To select your format, click on ‘Font’ and ‘WOFF’
- Click on ‘Start Conversion’ at the bottom
- The conversion will take a few seconds then you can download your new WOFF file
How do I use a WOFF file on my site?
After you have downloaded your file you will need to add your new font to a ‘fonts’ folder in your project. Once it is cozy in its new home you can begin to use it.
Here are your steps for font wizardry:
- Define your font-family in your CSS code. In the example below, you can see the path for my font, ‘bellaboo’.
- Now you can use your font! Here’s an example of some CSS for the body of my site:
- That's it! Enjoy your newfound creativity with fonts!