# Creating a Variable Font From Scratch

DevFeed: [Creating a Variable Font From Scratch](<https://devfeed.tech/articles/creating-a-variable-color-font-from-scratch-45276.md>)

Original publisher: [Read original article](<https://ishadeed.com/article/creating-a-variable-font/>)

Author: Ahmad Shadeed

Published: 2019-12-24T00:00:00Z

Content type: tutorial

Language: en

Sources: [Ahmad Shadeed](<https://devfeed.tech/sources/ahmad-shadeed.md>)

Topics: [Variable Fonts](<https://devfeed.tech/topics/variable-fonts.md>), [Font](<https://devfeed.tech/topics/font.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [css](<https://devfeed.tech/tags/css.md>), [fonts](<https://devfeed.tech/tags/fonts.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [variable-fonts](<https://devfeed.tech/tags/variable-fonts.md>)

## AI overview

A tutorial explaining variable fonts, including how multiple font variations can be stored in one file and used in projects. It covers variation axes such as weight, width, italic, and slant, along with browser fallback and Arabic font support.

## Source excerpt

Variable fonts are an evolution of OpenType font specification that allows us to have different font variations (width, weight or style) in a single file. That means, we can load only one font that can have many variations, instead of having multiple fonts loaded for each weight or style. In this article, I will walk you through into the details of variable fonts and how to get benefit from them in your projects. Also, I will explain about creating a custom variable font.