variable fonts implementation

This commit is contained in:
Tommi 2021-04-28 13:01:01 +02:00
부모 571ad32d3f
커밋 96555f6ce7
47개의 변경된 파일17개의 추가작업 그리고 223개의 파일을 삭제

파일 보기

@ -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
파일 보기

@ -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");
}

파일 보기

@ -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");
}

파일 보기

@ -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.

BIN
fonts/ubuntu-mono.woff2 Normal file

Binary file not shown.