DEV Community 👩‍💻👨‍💻

Cover image for Font styling with variable fonts in React
Majd Abu Hmoud
Majd Abu Hmoud

Posted on

Font styling with variable fonts in React

What is a variable font 🤔?

Variable fonts are an evolution of the OpenType font specification that enables many variations of a typeface to be combined into a single file, rather than having a separate font file for every width, weight, or style.

To know more about variable fonts, you can check out this article. This article will guide you on how to use these fonts and do cool animations with them 😁.

Where can you find these fonts ?

As a start, you can check out these fonts from Google Fonts. There is a cool font that I loved so much it's called Movement, this font is inspired by dance movements which is awesome 😎.

The Example

I only applied the font styling to the heading tags (h1, h2, etc..) in this example, but you can modify it so it can also be applied to other tags.

You can check out the example that I have created on CodeSandbox.


Using these fonts in React gives you the flexibility with font styling. If you have already made cool stuff with these fonts in React, you can share it in the comments below 😁.

Stay awesome guys and have an awesome day 😎

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.