Browse Source

variable fonts implementation

pull/9/head
Tommi 7 months ago
parent
commit
96555f6ce7
  1. 4
      Gemfile.lock
  2. 13
      _sass/_eb-garamond.scss
  3. 195
      _sass/_inter.scss
  4. 28
      _sass/_ubuntu-mono.scss
  5. BIN
      fonts/eb-garamond-italic.woff2
  6. BIN
      fonts/eb-garamond.woff2
  7. BIN
      fonts/inter.woff2
  8. BIN
      fonts/inter/Inter-Black.woff
  9. BIN
      fonts/inter/Inter-Black.woff2
  10. BIN
      fonts/inter/Inter-BlackItalic.woff
  11. BIN
      fonts/inter/Inter-BlackItalic.woff2
  12. BIN
      fonts/inter/Inter-Bold.woff
  13. BIN
      fonts/inter/Inter-Bold.woff2
  14. BIN
      fonts/inter/Inter-BoldItalic.woff
  15. BIN
      fonts/inter/Inter-BoldItalic.woff2
  16. BIN
      fonts/inter/Inter-ExtraBold.woff
  17. BIN
      fonts/inter/Inter-ExtraBold.woff2
  18. BIN
      fonts/inter/Inter-ExtraBoldItalic.woff
  19. BIN
      fonts/inter/Inter-ExtraBoldItalic.woff2
  20. BIN
      fonts/inter/Inter-ExtraLight.woff
  21. BIN
      fonts/inter/Inter-ExtraLight.woff2
  22. BIN
      fonts/inter/Inter-ExtraLightItalic.woff
  23. BIN
      fonts/inter/Inter-ExtraLightItalic.woff2
  24. BIN
      fonts/inter/Inter-Italic.woff
  25. BIN
      fonts/inter/Inter-Italic.woff2
  26. BIN
      fonts/inter/Inter-Light.woff
  27. BIN
      fonts/inter/Inter-Light.woff2
  28. BIN
      fonts/inter/Inter-LightItalic.woff
  29. BIN
      fonts/inter/Inter-LightItalic.woff2
  30. BIN
      fonts/inter/Inter-Medium.woff
  31. BIN
      fonts/inter/Inter-Medium.woff2
  32. BIN
      fonts/inter/Inter-MediumItalic.woff
  33. BIN
      fonts/inter/Inter-MediumItalic.woff2
  34. BIN
      fonts/inter/Inter-Regular.woff
  35. BIN
      fonts/inter/Inter-Regular.woff2
  36. BIN
      fonts/inter/Inter-SemiBold.woff
  37. BIN
      fonts/inter/Inter-SemiBold.woff2
  38. BIN
      fonts/inter/Inter-SemiBoldItalic.woff
  39. BIN
      fonts/inter/Inter-SemiBoldItalic.woff2
  40. BIN
      fonts/inter/Inter-Thin.woff
  41. BIN
      fonts/inter/Inter-Thin.woff2
  42. BIN
      fonts/inter/Inter-ThinItalic.woff
  43. BIN
      fonts/inter/Inter-ThinItalic.woff2
  44. BIN
      fonts/inter/Inter-italic.var.woff2
  45. BIN
      fonts/inter/Inter-roman.var.woff2
  46. BIN
      fonts/inter/Inter.var.woff2
  47. BIN
      fonts/ubuntu-mono.woff2

4
Gemfile.lock

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

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

195
_sass/_inter.scss

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

28
_sass/_ubuntu-mono.scss

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

BIN
fonts/eb-garamond-italic.woff2

BIN
fonts/eb-garamond.woff2

BIN
fonts/inter.woff2

BIN
fonts/inter/Inter-Black.woff

BIN
fonts/inter/Inter-Black.woff2

BIN
fonts/inter/Inter-BlackItalic.woff

BIN
fonts/inter/Inter-BlackItalic.woff2

BIN
fonts/inter/Inter-Bold.woff

BIN
fonts/inter/Inter-Bold.woff2

BIN
fonts/inter/Inter-BoldItalic.woff

BIN
fonts/inter/Inter-BoldItalic.woff2

BIN
fonts/inter/Inter-ExtraBold.woff

BIN
fonts/inter/Inter-ExtraBold.woff2

BIN
fonts/inter/Inter-ExtraBoldItalic.woff

BIN
fonts/inter/Inter-ExtraBoldItalic.woff2

BIN
fonts/inter/Inter-ExtraLight.woff

BIN
fonts/inter/Inter-ExtraLight.woff2

BIN
fonts/inter/Inter-ExtraLightItalic.woff

BIN
fonts/inter/Inter-ExtraLightItalic.woff2

BIN
fonts/inter/Inter-Italic.woff

BIN
fonts/inter/Inter-Italic.woff2

BIN
fonts/inter/Inter-Light.woff

BIN
fonts/inter/Inter-Light.woff2

BIN
fonts/inter/Inter-LightItalic.woff

BIN
fonts/inter/Inter-LightItalic.woff2

BIN
fonts/inter/Inter-Medium.woff

BIN
fonts/inter/Inter-Medium.woff2

BIN
fonts/inter/Inter-MediumItalic.woff

BIN
fonts/inter/Inter-MediumItalic.woff2

BIN
fonts/inter/Inter-Regular.woff

BIN
fonts/inter/Inter-Regular.woff2

BIN
fonts/inter/Inter-SemiBold.woff

BIN
fonts/inter/Inter-SemiBold.woff2

BIN
fonts/inter/Inter-SemiBoldItalic.woff

BIN
fonts/inter/Inter-SemiBoldItalic.woff2

BIN
fonts/inter/Inter-Thin.woff

BIN
fonts/inter/Inter-Thin.woff2

BIN
fonts/inter/Inter-ThinItalic.woff

BIN
fonts/inter/Inter-ThinItalic.woff2

BIN
fonts/inter/Inter-italic.var.woff2

BIN
fonts/inter/Inter-roman.var.woff2

BIN
fonts/inter/Inter.var.woff2

BIN
fonts/ubuntu-mono.woff2

Loading…
Cancel
Save