Skip to content

A npm package for distributing the Inter font family created by Rasmus Andersson.

License

Notifications You must be signed in to change notification settings

Leonya/inter-ui

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

The Inter Typeface (a npm distribution)

The CSS and web font files to easily self-host the Inter font family created by Rasmus Andersson.

This repository is just a means of more easily distributing the font. It tracks the releases of the main Inter repository as best as I am able. Note that this repository only contains the woff2 format but does generate and include latin-extended subsets for each font.

SCSS files are also available for use with the Sass preprocessor. The font-display property can be overridden by setting $inter-font-display to a valid font-display value before importing the desired .scss file.

Quick start

npm install --save inter-ui

SCSS

Add the following to your SCSS to use the variable font with a non-variable fallback:

@use "~inter-ui/default" with (
  $inter-font-display: swap,
  $inter-font-path: '~inter-ui/web'
);

@use "~inter-ui/variable" with (
  $inter-font-display: swap,
  $inter-font-path: '~inter-ui/variable'
);

@include default.all;
@include variable.all;

html { font-family: "Inter", "system-ui"; }

@supports (font-variation-settings: normal) {
  html { font-family: "InterVariable", "system-ui"; }
}

Note that this @use syntax is not currently supported in the node-sass or ruby sass implementations. We recommend using the primary sass implementation: dart sass.

JS/CSS

We have pre-built CSS files that you can include directly (with font-display being swap).

Add the following to your script:

import "inter-ui/inter.css";
// Or use one of those versions:
// import "inter-ui/inter-latin.css"; // A subset of only English alphabet characters
// import "inter-ui/inter-display.css"; // The display font is optimised for XL text
// import "inter-ui/inter-display-latin.css";
// import "inter-ui/inter-variable.css";
// import "inter-ui/inter-variable-latin.css";

Add the following to your stylesheet:

html { font-family: "Inter", "system-ui"; }

@supports (font-variation-settings: normal) {
  html { font-family: "InterVariable", "system-ui"; } /* If using the variable font */
}

Quirks

If you're using the Apache web server to serve the font files, you will probably encounter a 500 Internal Server Error by default. This is because the font files contain .var. in their name, which causes Apache to interpret those files in a special way.

There are two ways to solve this:

Either adapt its configuration to make it serve variable fonts as expected.

Alternatively you can copy/rename the font files removing the .var in their name and use the SCSS variable $inter-font-variable-suffix to change the filename in the CSS:

@use "~inter-ui/variable" with (
  $inter-font-variable-suffix: ''
);

Modular imports

To avoid having to import all "font faces". You can also use only some of them via SCSS.

If you only want 400 and 700 you can specify exactly this.

@use "~inter-ui/default" as inter-ui with (
  $inter-font-path: "~inter-ui/web-latin"
);
@include inter-ui.weight-400;
@include inter-ui.weight-700;

Versions

There are several versions you can choose from. To use them with the modules, just change the $inter-font-path to e.g. Inter (web hinted) or use the other pre-built CSS files.

Hinted vs Unhinted

As detailed in the main repo:

Inter font files comes in two versions:

  1. "unhinted" -- Without TrueType hints (the default)
  2. "hinted" -- With TrueType hints

The TrueType hints are used by ClearType on Windows machines where ClearType is enabled. This usually changes the appearance of the fonts and can in some cases increase the legibility of text.

Additionally, hints are little computer programs that takes up considerable disk space, meaning that font files with hints are larger than those without hints. This might be a consideration when using web fonts.

  • SCSS use: set $inter-font-path to Inter (web hinted) or Inter (web hinted latin)
  • JS/CSS use: import inter-ui/inter-hinted.css or inter-ui/inter-hinted-latin.css

Latin

If you only need support for Latin characters, you can use this version. The normal Inter (web) version average filesize is between 150kb and 100kb, the reduced Latin version is on average 30kb per font.

This was generated using glyphhanger. See package.json for the build script.

  • SCSS use: set $inter-font-path to Inter (web latin) or Inter (web hinted latin)
  • JS/CSS use: import inter-ui/inter-latin.css or inter-ui/inter-hinted-latin.css

About

A npm package for distributing the Inter font family created by Rasmus Andersson.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 58.7%
  • SCSS 41.3%