self host inter font (regular and bold) on a server

[orenmizr]

what is the correct way to host this font on a webserver (for on premise, no outer internet)

1. no dart-sass, just regular node-sass, so no "use" usage
2. i want the font to be as performant as possible (smallest size)
3. can it be variant ? one that can do regular and bold. is that supported in all "modern" browsers ?

thanks.

[rsms]

1. no dart-sass, just regular node-sass, so no "use" usage

From https://rsms.me/inter/#usage:

<!-- HTML in your document's head -->
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

/* CSS */
:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}

(of course replace rsms.me... with whatever host and location you serve the font files from)

2. i want the font to be as performant as possible (smallest size)

Variable fonts are the smallest; Inter.var.woff2, which you get automatically if you use the above HTML & CSS. This is only true if you use more than one style (one style is e.g. "Bold" or "Thin"), which is the common case. If you only use one style, then leave out the @supports (font-variation-settings: normal) {...} CSS which causes the web browser to download a specific static font file for the style you're using.

3. can it be variant ? one that can do regular and bold. is that supported in all "modern" browsers ?

I assume you mean "variable" here when you say "variant." Yes, that is a key feature of variable fonts — one font file contains all styles, both regular and bold.

MDN has a short primer on variable fonts that might give you a good introduction if you'd like to learn more.

[orenmizr]

thanks for the response.

• i saw that the variable is supported is most modern browsers. which is great.
• i understand i should delete the unneeded font types from the css.

[rsms]

• i understand i should delete the unneeded font types from the css.

No need to do that. Web browsers only load the fonts you use.