web: enable use of subset web font files (for variable fonts only)

This commit is contained in:
Rasmus Andersson 2020-08-21 16:06:02 -07:00
parent 15e2d60523
commit 57e80b4ab0
36 changed files with 825 additions and 414 deletions

View file

@ -0,0 +1,80 @@
/* extra */
@font-face {
font-family: 'Inter var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-italic.extra.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
font-named-instance: 'Italic';
}
/* alternates */
@font-face {
font-family: 'Inter var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-italic.alternates.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
font-named-instance: 'Italic';
}
/* symbols */
@font-face {
font-family: 'Inter var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-italic.symbols.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
font-named-instance: 'Italic';
}
/* cyrillic */
@font-face {
font-family: 'Inter var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-italic.cyrillic.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
font-named-instance: 'Italic';
}
/* greek */
@font-face {
font-family: 'Inter var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-italic.greek.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
font-named-instance: 'Italic';
}
/* vietnamese */
@font-face {
font-family: 'Inter var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-italic.vietnamese.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
font-named-instance: 'Italic';
}
/* latin-ext */
@font-face {
font-family: 'Inter var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-italic.latin-ext.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
font-named-instance: 'Italic';
}
/* latin */
@font-face {
font-family: 'Inter var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-italic.latin.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
font-named-instance: 'Italic';
}

View file

@ -0,0 +1,80 @@
/* extra */
@font-face {
font-family: 'Inter var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-roman.extra.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
font-named-instance: 'Regular';
}
/* alternates */
@font-face {
font-family: 'Inter var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-roman.alternates.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
font-named-instance: 'Regular';
}
/* symbols */
@font-face {
font-family: 'Inter var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-roman.symbols.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
font-named-instance: 'Regular';
}
/* cyrillic */
@font-face {
font-family: 'Inter var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-roman.cyrillic.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
font-named-instance: 'Regular';
}
/* greek */
@font-face {
font-family: 'Inter var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-roman.greek.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
font-named-instance: 'Regular';
}
/* vietnamese */
@font-face {
font-family: 'Inter var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-roman.vietnamese.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
font-named-instance: 'Regular';
}
/* latin-ext */
@font-face {
font-family: 'Inter var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-roman.latin-ext.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
font-named-instance: 'Regular';
}
/* latin */
@font-face {
font-family: 'Inter var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter-roman.latin.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
font-named-instance: 'Regular';
}

View file

@ -0,0 +1,152 @@
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Light.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Black.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff");
}

View file

@ -0,0 +1,72 @@
/* extra */
@font-face {
font-family: 'Inter var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter.extra.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
}
/* alternates */
@font-face {
font-family: 'Inter var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter.alternates.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
}
/* symbols */
@font-face {
font-family: 'Inter var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter.symbols.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
}
/* cyrillic */
@font-face {
font-family: 'Inter var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter.cyrillic.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
}
/* greek */
@font-face {
font-family: 'Inter var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter.greek.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
}
/* vietnamese */
@font-face {
font-family: 'Inter var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter.vietnamese.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter.latin-ext.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
}
/* latin */
@font-face {
font-family: 'Inter var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/Inter.latin.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
}

View file

@ -0,0 +1,80 @@
/* extra */
@font-face {
font-family: 'InterDisplay var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-italic.extra.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E0E7,U+E0F3-E15F,U+F6C3;
font-named-instance: 'Italic';
}
/* alternates */
@font-face {
font-family: 'InterDisplay var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-italic.alternates.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E0E7,U+E0F3-E15F,U+F6C3;
font-named-instance: 'Italic';
}
/* symbols */
@font-face {
font-family: 'InterDisplay var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-italic.symbols.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E15F,U+1F130-1F14A,U+1F850,U+1F852;
font-named-instance: 'Italic';
}
/* cyrillic */
@font-face {
font-family: 'InterDisplay var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-italic.cyrillic.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
font-named-instance: 'Italic';
}
/* greek */
@font-face {
font-family: 'InterDisplay var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-italic.greek.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
font-named-instance: 'Italic';
}
/* vietnamese */
@font-face {
font-family: 'InterDisplay var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-italic.vietnamese.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
font-named-instance: 'Italic';
}
/* latin-ext */
@font-face {
font-family: 'InterDisplay var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-italic.latin-ext.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20BF,U+2113,U+2C7C,U+2C7F,U+A7FF;
font-named-instance: 'Italic';
}
/* latin */
@font-face {
font-family: 'InterDisplay var';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-italic.latin.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
font-named-instance: 'Italic';
}

View file

@ -0,0 +1,80 @@
/* extra */
@font-face {
font-family: 'InterDisplay var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-roman.extra.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E0E7,U+E0F3-E15F,U+F6C3;
font-named-instance: 'Regular';
}
/* alternates */
@font-face {
font-family: 'InterDisplay var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-roman.alternates.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E0E7,U+E0F3-E15F,U+F6C3;
font-named-instance: 'Regular';
}
/* symbols */
@font-face {
font-family: 'InterDisplay var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-roman.symbols.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E15F,U+1F130-1F14A,U+1F850,U+1F852;
font-named-instance: 'Regular';
}
/* cyrillic */
@font-face {
font-family: 'InterDisplay var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-roman.cyrillic.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
font-named-instance: 'Regular';
}
/* greek */
@font-face {
font-family: 'InterDisplay var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-roman.greek.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
font-named-instance: 'Regular';
}
/* vietnamese */
@font-face {
font-family: 'InterDisplay var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-roman.vietnamese.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
font-named-instance: 'Regular';
}
/* latin-ext */
@font-face {
font-family: 'InterDisplay var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-roman.latin-ext.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20BF,U+2113,U+2C7C,U+2C7F,U+A7FF;
font-named-instance: 'Regular';
}
/* latin */
@font-face {
font-family: 'InterDisplay var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay-roman.latin.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
font-named-instance: 'Regular';
}

View file

@ -0,0 +1,152 @@
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("font-files/InterDisplay-Thin.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Thin.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("font-files/InterDisplay-ThinItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-ThinItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("font-files/InterDisplay-ExtraLight.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-ExtraLight.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("font-files/InterDisplay-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-ExtraLightItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("font-files/InterDisplay-Light.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Light.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("font-files/InterDisplay-LightItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-LightItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("font-files/InterDisplay-Regular.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Regular.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("font-files/InterDisplay-Italic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Italic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("font-files/InterDisplay-Medium.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Medium.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("font-files/InterDisplay-MediumItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-MediumItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("font-files/InterDisplay-SemiBold.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-SemiBold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("font-files/InterDisplay-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-SemiBoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("font-files/InterDisplay-Bold.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Bold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("font-files/InterDisplay-BoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-BoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("font-files/InterDisplay-ExtraBold.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-ExtraBold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("font-files/InterDisplay-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("font-files/InterDisplay-Black.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Black.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("font-files/InterDisplay-BlackItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-BlackItalic.woff?v={{font_v}}") format("woff");
}

View file

@ -0,0 +1,72 @@
/* extra */
@font-face {
font-family: 'InterDisplay var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay.extra.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E0E7,U+E0F3-E15F,U+F6C3;
}
/* alternates */
@font-face {
font-family: 'InterDisplay var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay.alternates.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+E000,U+E002-E0E7,U+E0F3-E15F,U+F6C3;
}
/* symbols */
@font-face {
font-family: 'InterDisplay var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay.symbols.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E15F,U+1F130-1F14A,U+1F850,U+1F852;
}
/* cyrillic */
@font-face {
font-family: 'InterDisplay var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay.cyrillic.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
}
/* greek */
@font-face {
font-family: 'InterDisplay var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay.greek.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
}
/* vietnamese */
@font-face {
font-family: 'InterDisplay var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay.vietnamese.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'InterDisplay var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay.latin-ext.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20BF,U+2113,U+2C7C,U+2C7F,U+A7FF;
}
/* latin */
@font-face {
font-family: 'InterDisplay var experimental';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
src: url('font-files/InterDisplay.latin.var.woff2?v={{font_v}}') format('woff2');
unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
}

View file

@ -5,5 +5,5 @@ assign url_root = "/" %}{% else %}{%
assign url_root = "/inter/" %}{% endif %}{%
assign font_v = site.data.fontinfo[0].version
%}<link rel="preload" href="{{url_root}}font-files/Inter-roman.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="{{url_root}}font-files/Inter-italic.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin="anonymous">
%}<link rel="preload" href="{{url_root}}font-files/Inter-roman.latin.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="{{url_root}}font-files/Inter-italic.latin.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin="anonymous">

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -497,8 +497,8 @@ html { font-family: 'Inter', sans-serif; }
<h4 id="faq-cdn"><a href="#faq-cdn">
How reliable are the fonts served from rsms.me/inter?
</a></h4>
rsms.me/inter is backed by GitHub's server network and distributed
globally on the CloudFlare CDN, making usage of
<tt>rsms.me/inter</tt> is distributed globally over CloudFlare's CDN,
backed by GitHub's servers, making usage of
<q>https://rsms.me/inter/inter.css</q> and associated font
files very reliable and fast throughout the world.
</c>
@ -523,12 +523,13 @@ html { font-family: 'Inter', sans-serif; }
How do I subset the font files?
</a></h4>
The web fonts provided by <a href="inter.css"><tt>inter.css</tt></a> and
<a href="inter-display.css"><tt>inter-display.css</tt></a> already use subset font files.
If you need special, customized subsets or subsetting of OTF or TTF files,
have a look at the tools
<a href="inter-display.css"><tt>inter-display.css</tt></a> are already subset
(variable version.)
If you need special customized subsets, or subsetting OTF or TTF files,
have a look at
<a href="https://fonttools.readthedocs.io/en/latest/subset/"><tt>pyftsubset</tt></a>
and
<a href="https://github.com/filamentgroup/glyphhanger"><tt>glyphhanger</tt></a>
<a href="https://github.com/filamentgroup/glyphhanger"><tt>glyphhanger</tt></a>.
</c>
<c>

View file

@ -2,221 +2,33 @@
layout: none
---
{% assign font_v = site.data.fontinfo[0].version %}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("font-files/InterDisplay-Thin.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Thin.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("font-files/InterDisplay-ThinItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-ThinItalic.woff?v={{font_v}}") format("woff");
}
/*
Font families defined by this CSS:
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("font-files/InterDisplay-ExtraLight.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-ExtraLight.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("font-files/InterDisplay-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-ExtraLightItalic.woff?v={{font_v}}") format("woff");
}
- "InterDisplay" static "traditional" fonts for older web browsers
- "InterDisplay var" single-axis variable fonts for all modern browsers
- "InterDisplay var experimental" multi-axis variable fonts for modern web browsers
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("font-files/InterDisplay-Light.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Light.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("font-files/InterDisplay-LightItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-LightItalic.woff?v={{font_v}}") format("woff");
}
Use like this in your CSS:
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("font-files/InterDisplay-Regular.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Regular.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("font-files/InterDisplay-Italic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Italic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("font-files/InterDisplay-Medium.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Medium.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("font-files/InterDisplay-MediumItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-MediumItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("font-files/InterDisplay-SemiBold.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-SemiBold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("font-files/InterDisplay-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-SemiBoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("font-files/InterDisplay-Bold.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Bold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("font-files/InterDisplay-BoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-BoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("font-files/InterDisplay-ExtraBold.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-ExtraBold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("font-files/InterDisplay-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("font-files/InterDisplay-Black.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-Black.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("font-files/InterDisplay-BlackItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/InterDisplay-BlackItalic.woff?v={{font_v}}") format("woff");
}
/* -------------------------------------------------------
Variable font.
Usage:
html { font-family: 'InterDisplay', sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: 'InterDisplay', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'InterDisplay var', sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: 'InterDisplay var', sans-serif; }
}
*/
@font-face {
font-family: 'InterDisplay var';
font-weight: 100 900;
font-style: normal;
font-named-instance: 'Regular';
font-display: swap;
src: url("font-files/InterDisplay-roman.var.woff2?v={{font_v}}") format("woff2");
}
@font-face {
font-family: 'InterDisplay var';
font-weight: 100 900;
font-style: italic;
font-named-instance: 'Italic';
font-display: swap;
src: url("font-files/InterDisplay-italic.var.woff2?v={{font_v}}") format("woff2");
}
/* Legacy naming compatibility */
@font-face {
font-family: 'InterDisplay var alt';
font-weight: 100 900;
font-style: normal;
font-named-instance: 'Regular';
font-display: swap;
src: url("font-files/InterDisplay-roman.var.woff2?v={{font_v}}") format("woff2");
}
@font-face {
font-family: 'InterDisplay var alt';
font-weight: 100 900;
font-style: italic;
font-named-instance: 'Italic';
font-display: swap;
src: url("font-files/InterDisplay-italic.var.woff2?v={{font_v}}") format("woff2");
}
------------------------- static ------------------------- */
{% include InterDisplay-static.css %}
/* ----------------------- variable ----------------------- */
{% include InterDisplay-italic.var.css %}
{% include InterDisplay-roman.var.css %}
/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.
/* ----------- experimental multi-axis variable -----------
Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.
When using this, you will probably need to set font-variation-settings
explicitly, e.g.
multi-axis single-file variable font is opt-in rather than the default.
When using this, you will likely need to set font-variation-settings explicitly, e.g:
* { font-variation-settings: "slnt" 0deg }
.italic { font-variation-settings: "slnt" 10deg }
*/
@font-face {
font-family: 'InterDisplay var experimental';
font-weight: 100 900;
font-style: oblique 0deg 10deg;
font-display: swap;
src: url("font-files/InterDisplay.var.woff2?v={{font_v}}") format("woff2");
}
{% include InterDisplay.var.css %}

View file

@ -2,221 +2,51 @@
layout: none
---
{% assign font_v = site.data.fontinfo[0].version %}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff");
}
/*
Font families defined by this CSS:
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff");
}
- "Inter" static "traditional" fonts for older web browsers
- "Inter var" single-axis variable fonts for all modern browsers
- "Inter var experimental" multi-axis variable fonts for modern web browsers
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Light.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff");
}
Use like this in your CSS:
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-Black.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"),
url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff");
}
/* -------------------------------------------------------
Variable font.
Usage:
html { font-family: 'Inter', sans-serif; }
:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
:root { font-family: 'Inter var', sans-serif; }
}
*/
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-style: normal;
font-named-instance: 'Regular';
font-display: swap;
src: url("font-files/Inter-roman.var.woff2?v={{font_v}}") format("woff2");
}
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-style: italic;
font-named-instance: 'Italic';
font-display: swap;
src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2");
}
/* Legacy naming compatibility */
@font-face {
font-family: 'Inter var alt';
font-weight: 100 900;
font-style: normal;
font-named-instance: 'Regular';
font-display: swap;
src: url("font-files/Inter-roman.var.woff2?v={{font_v}}") format("woff2");
}
@font-face {
font-family: 'Inter var alt';
font-weight: 100 900;
font-style: italic;
font-named-instance: 'Italic';
font-display: swap;
src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2");
}
------------------------- static ------------------------- */
{% include Inter-static.css %}
/* ----------------------- variable ----------------------- */
{% include Inter-italic.var.css %}
{% include Inter-roman.var.css %}
/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.
/* ----------- experimental multi-axis variable -----------
Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.
When using this, you will probably need to set font-variation-settings
explicitly, e.g.
multi-axis single-file variable font is opt-in rather than the default.
When using this, you will likely need to set font-variation-settings explicitly, e.g:
* { font-variation-settings: "slnt" 0deg }
.italic { font-variation-settings: "slnt" 10deg }
*/
{% include Inter.var.css %}
/* Legacy name (became legacy on Feb 2, 2019) */
@font-face {
font-family: 'Inter var experimental';
font-family: 'Inter var alt';
font-weight: 100 900;
font-style: oblique 0deg 10deg;
font-style: normal;
font-named-instance: 'Regular';
font-display: swap;
src: url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2");
src: url("font-files/Inter-roman.var.woff2?v={{font_v}}") format("woff2");
}
@font-face {
font-family: 'Inter var alt';
font-weight: 100 900;
font-style: italic;
font-named-instance: 'Italic';
font-display: swap;
src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2");
}