image

Wanna get creative with fonts for your site? Use WOFF!

Jayme Hewitt

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?

image

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:
  1. Select your TTF or OTF file from your computer

  2. To select your format, click on ‘Font’ and ‘WOFF’

  3. Click on ‘Start Conversion’ at the bottom

  4. 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:
  1. Define your font-family in your CSS code. In the example below, you can see the path for my font, ‘bellaboo’.

  2. picture of defining a woff file font-face in CSS

  3. Now you can use your font! Here’s an example of some CSS for the body of my site:

  4. picture of the use of a woff file in CSS code

  5. That's it! Enjoy your newfound creativity with fonts!

About the author
placeholder image
Jayme Hewitt is a product manager, mama of two adventurous kids, and current student at MomsCan: Code School. Curiosity, drive, and a strong passion for bringing the voice of the customer into the product development process led Jayme to cultivate a career in product management. Many years in various customer service/community manager roles fed the desire to be a larger part of delighting customers through thoughtful, user-centered product development. As an enrolled student at MomsCan: Code School, Jayme is excited about learning another facet of product creation, this time on the engineering side of things. She is learning how to think about problems in a new way and enjoys applying what she has learned to other areas of her life. When not learning to code you can find her traveling the world with her family, geocaching, or hiking in the mountains of the Pacific Northwest.

Learn Digital Skills

Find out when the next cohort begins!

The most comprehensive program to up your game in the remote career world.

Learn More
Back