Variable Fonts
Variable fonts are increasing in popularity as the browser support is getting better by the day. A single font file for multiple styles.
Traditionally, a font file has to be served for every member of a typeface family. Having thin, regular, bold & italic styles for several different weights will add up fast and you may end up with several hundred KBs of data.
Variable fonts, however store multiple variants of a typeface family in a single font file. This article will use Inter, which is a free and open-source font family that offers both Traditional constant font files and a Variable font file.
🚀 Adding Variable font Inter to a React App
This article assumes that the project is based on Create React App.
Use the webpack build pipeline to include the font file in the final bundle by using import in a JavaScript module. No need to worry about long-term caching of assets as webpack creates the final filename based on the content hash of the compiled bundle.
You should already have the following line in src/index.js :
First, download the Inter typeface family from the official Inter page. The download link is found in the top navigation menu.
Simplified tree of the downloaded zip:
├── Inter Desktop │ └── . ├── Inter Hinted for Windows │ └── . ├── Inter Variable │ └── . ├── Inter Web │ ├── . │ ├── Inter-ThinItalic.woff │ ├── Inter-ThinItalic.woff2 │ ├── Inter-italic.var.woff2 │ ├── Inter-roman.var.woff2 │ ├── Inter.var.woff2 │ └── inter.css └── . Extract inter.var.woff2 from the Inter Web folder. Create a fonts folder into the project src and move the font file inside of it.
Next, let’s add the following @font-face rule to src/index.css
@font-face font-family: "Inter Variable"; src: url("./fonts/Inter.var.woff2") format("woff2"); font-weight: 100 900; >To make use of the variable weight axis the range of font-weight is set to be from 100 to 900. When font-weight is omitted, it’s treated with a default value of font-weight: 400 by the browser. Meaning that the font would correspond to only 400 weight regardless of it being a variable font.
Finally, apply the font to a DOM element and try it out!
body font-family: "Inter Variable", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; >Notice that font-smoothing property is also added to make font rendering a bit nicer in WebKit and Firefox based browsers.
🎉 That’s it. The font-weight can be set to any value between 100 and 900.
You can even have some fun and animate between the font weights or any other font-variation-settings value supported by your font family.
// index.css @keyframes breathe 0% font-weight: 100; > 50% font-weight: 900; > 100% font-weight: 100; > > h1 animation: breathe 2000ms infinite; >Don’t recommend using this in production as it causes repaints 😅
It’s also possible to edit public/index.html and add a link to the index.css stylesheet via the traditional way. The %PUBLIC_URL% variable will be replaced with the URL of the public folder during build time.
link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/index.css" />Create a fonts folder in the public folder with the downloaded variable font file inside of it.
Next, put the following content into a new file in public/index.css
@font-face font-family: "Inter Variable"; src: url("fonts/Inter.var.woff2") format("woff2"); >Done! Now just use font-family to apply it as shown in the previous section.
When possible, prefer the CSS import method as this avoids the webpack build pipeline, which means that the index.css doesn’t get minified, hashed, etc.
Supporting older browsers
The browser support for Variable fonts is getting better, as of writing this (July 2020) it’s over 90%.
Extract all the files from Inter Web to the project src/fonts folder (similarly to the CSS import section).
Add @font-face rules like the one below from Inter Web/index.css to your index.css . These will refer to traditional font files for fallbacks. Avoid importing font styles that you don’t plan on using.
@font-face font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff?v=3.13") format("woff"); src: url("fonts/Inter-Regular.woff2?v=3.13") format("woff2"); >IE11 doesn’t support Web Open Font Format 2.0 .woff2 and needs .woff fallback.
All browsers that support Variable fonts also support CSS Feature Queries. So it’s possible to check if the feature is supported using @supports and then override the fallback styling.
body font-family: "Inter", sans-serif; > @supports (font-variation-settings: normal) body font-family: "Inter Variable", sans-serif; > >Alternatively you can use the following CSS from Inter to get everything remotely with fallbacks. However, using a subset of inter.css styles locally is preferred.
@import url("https://rsms.me/inter/inter.css"); body font-family: "Inter", sans-serif; > @supports (font-variation-settings: normal) body font-family: "Inter var", sans-serif; > >Each font family defines their own font-variation-settings that change the font in different ways.
There’s a great resource v-fonts for trying and discovering Variable fonts with sliders for their custom settings.
Fullstack JavaScript, TypeScript developer in Tallinn, Estonia 🇪🇪Ragnar Rebase on GitHub
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
License
rsms/inter
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
Inter is a typeface carefully crafted & designed for computer screens. Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Inter is a variable font with several OpenType features, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate «0» from «o», tabular numbers, etc.
- Where can I get Inter?Here
- I think I found a bug. How can I let you know?Open an issue here
- I have a question. Where can I get help?Post in Discussions Q&A
- Should I use Inter from Google Fonts? No, unless you have no other choice. (outdated, no italics)
- Can I legally use Inter for my purpose? Most likely yes! Inter is free and open source. (Read the license for details.)
Using Inter on a web page:
link rel pl-s">preconnect" href pl-s">https://your-font-file-host/"> link rel pl-s">stylesheet" href pl-s">https://your-font-file-host/inter.css">
:root < font-family: 'Inter', sans-serif; > @supports (font-variation-settings: normal) < :root < font-family: 'Inter var', sans-serif; > >
For web pages, there’s an official CDN distribution that you can use directly without having to host the font files yourself:
link rel pl-s">preconnect" href pl-s">https://rsms.me/"> link rel pl-s">stylesheet" href pl-s">https://rsms.me/inter/inter.css">
Disclaimer: Alternate distributions may not always be up-to-date.
Notable projects using Inter
A wholehearted Thank You to everyone who supports the Inter project!
Special thanks to @thundernixon and @KatjaSchimmel who have put in significant effort into making Inter what it is through their contributions ♡
See graphs/contributors for a complete list of all contributors.
Contributing to this project
For instructions on how to work with the source files and how to compile & build font files, refer to CONTRIBUTING.md.
Inter is licensed under the SIL Open Font License
Creating derivative fonts
Inter is open source which means you can make your own versions with your own changes. However when doing so, please read LICENSE.txt carefully. It is a standard SIL Open Font License 1.1:
The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
While you are allowed to use Inter commercially, i.e. bundled with product or service which makes you money, you are NOT allowed to sell Inter itself or derivatives of Inter. If you would like to do so, please reach out and we can talk about it.
Inter a trademark of Rasmus Andersson (DBA: RSMS)
«Inter» is a Reserved Font Name by Rasmus Andersson (font vendor code RSMS.)
This section discusses some of the design choices made for Inter.
Inter can be classified as a geometric neo-grotesque, similar in style to Roboto, Apple San Francisco, Akkurat, Asap, Lucida Grande and more. Some trade-offs were made in order to make this typeface work really well at small sizes:
- Early versions of Inter was not suitable for very large sizes because of some small-scale glyph optimizations (like «pits» and «traps») that help rasterization at small sizes but stand out and interfere at large sizes. However today Inter works well at large sizes and a Display subfamily is in the works for really large «display» sizes.
- Rasterized at sizes below 12px, some stems—like the horizontal center of «E», «F», or vertical center of «m»—are drawn with two semi-opaque pixels instead of one solid. This is because we «prioritize» (optimize for) higher-density rasterizations. If we move these stems to an off-center position—so that they can be drawn sharply at e.g. 11px—text will be less legible at higher resolutions.
Inter is a variable font and is in addition also distributed as a set of traditional distinct font files in the following styles:
| Roman (upright) name | Italic name | Weight |
|---|---|---|
| Thin | Thin Italic | 100 |
| Extra Light | Extra Light Italic | 200 |
| Light | Light Italic | 300 |
| Regular | Italic | 400 |
| Medium | Medium Italic | 500 |
| Semi Bold | Semi Bold Italic | 600 |
| Bold | Bold Italic | 700 |
| Extra Bold | Extra Bold Italic | 800 |
| Black | Black Italic | 900 |