codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Follow publication

Welcome to the world of variable fonts

Fonts are boring, the future is variable fonts

Vaibhav Khulbe
codeburst
Published in
4 min readAug 11, 2018
GIF credit: Adobe Typekit Blog

Gosh, I’m so late to this. Indeed. I’ve already worked with hundreds of variables and I’m fond of the Lato font by Google Fonts but the word variable fonts came to my mind just a week ago. Did some mini-research and boom! I was like, “this is so interesting and new to the world of web technology. I should definitely work on this.” I never in my dreams thought that this new technology was announced by Adobe back in 2016 in one of their blog post. Duh.

What will I make?

This:

This looks bad in GIF. Try to implement it and run on your browser to see the amazing output.

Not this:

Well that’s a great typography! GIF credits: GIPHY

What is a variable font❔

Back in September 2016 at the ATypI conference in Warsaw, a new term was introduced, variable fonts or v-fonts. To explain it, hear what John Hudson said, “a single font file that behaves like multiple fonts”. Exciting?

A variable font has (almost) no boundaries of its properties. It inherits infinite flexibility of its weight or width, its fringes or hooves, its concavity or bracketing and all this without gaining the size of the file!

Much exciting!

All of this would mean so much to the design world. Be it a sketch artist, a typography learner or even a studious web developer/designer like me. Hah!

What will I need? 🛠️

  • H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
  • Your already wonderful HTML and CSS skills.
  • A text editor (I’ll be using VS Code just because for my last tutorial on CSS trick, I used it…I think VS Code is the one and only editor to love!)
  • The Gingham variable font file from here.

Shall we, variate?

We’re about to make that subheading dance! GIF credits: GIPHY

⚠️ Hey! Before you start anything, let me tell you that the variable fonts won’t run perfectly on my beloved Firefox web browser and that too on Windows. Yes, my alternate browser to do experiments, i.e. Chrome supports that. Check out this for more information. ⚠️

Let’s surge step-by-step:

  1. Extract that Gingham font ZIP file you just downloaded.
  2. Pick the Gingham.woff2 file and paste it in your current project folder.
  3. Open the folder in your code editor and make our two obvious files; index.html and style.css.
  4. Fill the HTML with boilerplate, link the style-sheet, make a <h1> and a <span>. The span should have a class, like <span class=”animate”>

Now here comes our beautiful styling part:

  1. Add a @font-face rule globally with src pointing to the location of where your woff2 file is located and give it a format of woff2.
  2. For the Gingham font we have two main properties to concentrate. First is the wght or weight and the second is, as you might’ve guessed, width or wdth. We’ll use the font-variation-settings property on the <h1>, give it a weight and width of 500 initially. For the span, we do the weight of 10 and a width of 0.
  3. Next we’ll add animation to the span. Select the animate class, add a 2s infinite alternate-reverse animation to it.
  4. Finally, we add a @keyframes property to the animate class starting from width and weight of 0 to 700 and 500 respectively.

Save and run it on the supported browser. You should be able to achieve the exact result. If not, then here’s the CSS code for the same:

Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Written by Vaibhav Khulbe

✦ Independent web developer/designer/blogger ✦ Framer Developer at Moving Rectangles ✦ Framer Expert & Partner | Advocate at 10x Designers

Responses (1)

Write a response