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

View file

@ -2,221 +2,33 @@
layout: none layout: none
--- ---
{% assign font_v = site.data.fontinfo[0].version %} {% assign font_v = site.data.fontinfo[0].version %}
@font-face { /*
font-family: 'InterDisplay'; Font families defined by this CSS:
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 { - "InterDisplay" static "traditional" fonts for older web browsers
font-family: 'InterDisplay'; - "InterDisplay var" single-axis variable fonts for all modern browsers
font-style: normal; - "InterDisplay var experimental" multi-axis variable fonts for modern web browsers
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 { Use like this in your CSS:
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 { h1,h2,h3,h4,h5,h6 { font-family: 'InterDisplay', sans-serif; }
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; }
@supports (font-variation-settings: normal) { @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 */ ------------------------- static ------------------------- */
@font-face { {% include InterDisplay-static.css %}
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");
}
/* ----------------------- variable ----------------------- */
{% include InterDisplay-italic.var.css %}
{% include InterDisplay-roman.var.css %}
/* -------------------------------------------------------------------------- /* ----------- experimental multi-axis variable -----------
[EXPERIMENTAL] Multi-axis, single variable font.
Slant axis is not yet widely supported (as of February 2019) and thus this 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. 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:
When using this, you will probably need to set font-variation-settings
explicitly, e.g.
* { font-variation-settings: "slnt" 0deg } * { font-variation-settings: "slnt" 0deg }
.italic { font-variation-settings: "slnt" 10deg } .italic { font-variation-settings: "slnt" 10deg }
*/ */
@font-face { {% include InterDisplay.var.css %}
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");
}

View file

@ -2,221 +2,51 @@
layout: none layout: none
--- ---
{% assign font_v = site.data.fontinfo[0].version %} {% assign font_v = site.data.fontinfo[0].version %}
@font-face { /*
font-family: 'Inter'; Font families defined by this CSS:
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 { - "Inter" static "traditional" fonts for older web browsers
font-family: 'Inter'; - "Inter var" single-axis variable fonts for all modern browsers
font-style: normal; - "Inter var experimental" multi-axis variable fonts for modern web browsers
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 { Use like this in your CSS:
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 { :root { font-family: 'Inter', sans-serif; }
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; }
@supports (font-variation-settings: normal) { @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 */ ------------------------- static ------------------------- */
@font-face { {% include Inter-static.css %}
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");
}
/* ----------------------- variable ----------------------- */
{% include Inter-italic.var.css %}
{% include Inter-roman.var.css %}
/* -------------------------------------------------------------------------- /* ----------- experimental multi-axis variable -----------
[EXPERIMENTAL] Multi-axis, single variable font.
Slant axis is not yet widely supported (as of February 2019) and thus this 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. 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:
When using this, you will probably need to set font-variation-settings
explicitly, e.g.
* { font-variation-settings: "slnt" 0deg } * { font-variation-settings: "slnt" 0deg }
.italic { font-variation-settings: "slnt" 10deg } .italic { font-variation-settings: "slnt" 10deg }
*/ */
{% include Inter.var.css %}
/* Legacy name (became legacy on Feb 2, 2019) */
@font-face { @font-face {
font-family: 'Inter var experimental'; font-family: 'Inter var alt';
font-weight: 100 900; font-weight: 100 900;
font-style: oblique 0deg 10deg; font-style: normal;
font-named-instance: 'Regular';
font-display: swap; 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");
} }