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 pull out to use when I start on a new project.
We were 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 compression and data help them stand out to browsers as a web font, not just a font that is used locally on one’s computer and speeds up the transfer process between a server and a computer on a network connection.
Why do you need WOFF files?
My partner didn’t have the fonts that I picked out for our project installed on her computer. When she looked at our code on the server preview, her computer picked out a basic web safe font to display our text in, because it didn’t recognize the font-family I stuck in the CSS. To put it bluntly, not everyone is as font-crazed as me, so I shouldn’t expect them to have the fonts that I love installed on their computer. If you want a better chance that most people will have the experience that you have designed for them, you need to use WOFF files for any non-web safe fonts that you choose to use.
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 and a simple, free one that I found to use was cloudconvert. Here are the steps:
- 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?
Next, you will need to add your new fonts to a ‘fonts’ folder in your project. Once they are cozy in their new home you can begin to use them. 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:
Enjoy your newfound creativity with fonts!
