Change all default fonts to Inter

about.md

What?

This style allows you to set all default fonts on the web to Inter typeface made by Rasmus Andersson. It's a great font and fits very nicely within any website which uses default typefaces.

How to enable?

I use a Chrome extension called User JavaScript and CSS to inject this custom CSS into every page. Use * in place of website URL to inject the script into every webpage.

However, I would suggest excluding all websites you use frequently which use custom fonts so you don't run into trouble. For me it was Google Docs — they become buggy if this font is enabled. For example, write *, !docs.google.com, !excludedwebsite.com to activate the style on all pages except Google Docs and “excludedwebsite.com” (write a comma-separated list of domains you want to exclude starting each one with an exclamation mark).

I recommend installing the font locally so you won't use more network every time you open a website — everything would be smooth and quick. And when the new version of the font comes out you could just download a new font and replace it on the system instead of changing the CSS.

inter-font.css

@font-face {
  font-family: "system-ui";
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-Thin"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-ThinItalic"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLight"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLightItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-Light"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-LightItalic"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Regular"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Italic"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-Medium"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-MediumItalic"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBold"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-Bold"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-BoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBold"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-Black"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "system-ui";
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-BlackItalic"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-Thin"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-ThinItalic"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLight"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLightItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-Light"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-LightItalic"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Regular"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Italic"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-Medium"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-MediumItalic"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBold"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-Bold"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-BoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBold"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-Black"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-system-ui";
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-BlackItalic"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-Thin"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-ThinItalic"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLight"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLightItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-Light"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-LightItalic"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Regular"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Italic"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-Medium"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-MediumItalic"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBold"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-Bold"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-BoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBold"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-Black"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "-apple-system";
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-BlackItalic"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-Thin"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-ThinItalic"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLight"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLightItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-Light"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-LightItalic"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Regular"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Italic"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-Medium"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-MediumItalic"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBold"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-Bold"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-BoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBold"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-Black"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff?v=3.9") format("woff");
}

@font-face {
  font-family: sans-serif;
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-BlackItalic"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-Thin"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-ThinItalic"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLight"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLightItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-Light"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-LightItalic"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Regular"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Italic"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-Medium"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-MediumItalic"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBold"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-Bold"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-BoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBold"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-Black"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-BlackItalic"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-Thin"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Thin.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: local("Inter-ThinItalic"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLight"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: local("Inter-ExtraLightItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-Light"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Light.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: local("Inter-LightItalic"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Regular"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: local("Inter-Italic"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Italic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-Medium"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: local("Inter-MediumItalic"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBold"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: local("Inter-SemiBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-Bold"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: local("Inter-BoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBold"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: local("Inter-ExtraBoldItalic"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-Black"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Black.woff?v=3.9") format("woff");
}

@font-face {
  font-family: "Arial";
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: local("Inter-BlackItalic"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff2?v=3.9") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff?v=3.9") format("woff");
}

Forked: https://gist.github.com/jamiesteven/529a2beaa9b2022a27bcd116839cd418