variable fonts implementation

This commit is contained in:
Tommi 2021-04-28 13:01:01 +02:00
parent 571ad32d3f
commit 96555f6ce7
47 changed files with 17 additions and 223 deletions

View File

@ -15,7 +15,7 @@ GEM
em-websocket (0.5.2)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
ethon (0.13.0)
ethon (0.14.0)
ffi (>= 1.15.0)
eventmachine (1.2.7)
ffi (1.15.0)
@ -23,7 +23,7 @@ GEM
html-pipeline (2.14.0)
activesupport (>= 2)
nokogiri (>= 1.4)
html-proofer (3.19.0)
html-proofer (3.19.1)
addressable (~> 2.3)
mercenary (~> 0.3)
nokogumbo (~> 2.0)

13
_sass/_eb-garamond.scss Normal file
View File

@ -0,0 +1,13 @@
@font-face {
font-family: 'EB Garamond';
font-weight: 100 900;
font-display: swap;
src: url("/fonts/eb-garamond.woff2") format("woff2");
}
@font-face {
font-family: 'EB Garamond';
font-weight: 100 900;
font-display: swap;
font-style: italic;
src: url("/fonts/eb-garamond-italic.woff2") format("woff2");
}

View File

@ -1,200 +1,7 @@
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("/fonts/inter/Inter-Thin.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-Thin.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("/fonts/inter/Inter-ThinItalic.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-ThinItalic.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("/fonts/inter/Inter-ExtraLight.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-ExtraLight.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("/fonts/inter/Inter-ExtraLightItalic.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-ExtraLightItalic.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/fonts/inter/Inter-Light.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-Light.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/fonts/inter/Inter-LightItalic.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-LightItalic.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/inter/Inter-Regular.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-Regular.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/fonts/inter/Inter-Italic.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-Italic.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/inter/Inter-Medium.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-Medium.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/fonts/inter/Inter-MediumItalic.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-MediumItalic.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/inter/Inter-SemiBold.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-SemiBold.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/fonts/inter/Inter-SemiBoldItalic.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-SemiBoldItalic.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/inter/Inter-Bold.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-Bold.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/fonts/inter/Inter-BoldItalic.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-BoldItalic.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/fonts/inter/Inter-ExtraBold.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-ExtraBold.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/fonts/inter/Inter-ExtraBoldItalic.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-ExtraBoldItalic.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/fonts/inter/Inter-Black.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-Black.woff?v=3.18") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("/fonts/inter/Inter-BlackItalic.woff2?v=3.18") format("woff2"),
url("/fonts/inter/Inter-BlackItalic.woff?v=3.18") format("woff");
}
/* -------------------------------------------------------
Variable font.
Usage:
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
*/
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url("/fonts/inter/Inter-roman.var.woff2?v=3.18") format("woff2");
}
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: 'Italic';
src: url("/fonts/inter/Inter-italic.var.woff2?v=3.18") format("woff2");
}
/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.
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.
* { font-variation-settings: "slnt" 0deg }
.italic { font-variation-settings: "slnt" 10deg }
*/
@font-face {
font-family: 'Inter var experimental';
font-weight: 100 900;
font-display: swap;
font-style: oblique 0deg 10deg;
src: url("/fonts/inter/Inter.var.woff2?v=3.18") format("woff2");
src: url("/fonts/inter.woff2") format("woff2");
}

View File

@ -3,31 +3,5 @@
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://tommi.space/fonts/ubuntu-mono/UbuntuMono-Regular.woff2") format("woff2"),
url("https://tommi.space/fonts/ubuntu-mono/UbuntuMono-Regular.woff") format("woff");
}
@font-face {
font-family: 'Ubuntu Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("https://tommi.space/fonts/ubuntu-mono/UbuntuMono-Italic.woff2") format("woff2"),
url("https://tommi.space/fonts/ubuntu-mono/UbuntuMono-Italic.woff") format("woff");
}
@font-face {
font-family: 'Ubuntu Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://tommi.space/fonts/ubuntu-mono/UbuntuMono-Bold.woff2") format("woff2"),
url("https://tommi.space/fonts/ubuntu-mono/UbuntuMono-Bold.woff") format("woff");
}
@font-face {
font-family: 'Ubuntu Mono';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("https://tommi.space/fonts/ubuntu-mono/UbuntuMono-BoldItalic.woff2") format("woff2"),
url("https://tommi.space/fonts/ubuntu-mono/UbuntuMono-BoldItalic.woff") format("woff");
src: url("/fonts/ubuntu-mono.woff2") format("woff2");
}

Binary file not shown.

BIN
fonts/eb-garamond.woff2 Normal file

Binary file not shown.

BIN
fonts/inter.woff2 Normal file

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.

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.

BIN
fonts/ubuntu-mono.woff2 Normal file

Binary file not shown.