Browse Source

feat: move to selfhosted Inter font

main
Inhji Y. 7 months ago
parent
commit
246ba76fbe
  1. 200
      assets/css/_inter.scss
  2. 2
      assets/css/app.scss
  3. 1348
      assets/css/ok.css
  4. BIN
      assets/static/fonts/OpenSans-Regular-webfont.woff
  5. 7
      lib/mirage_web/templates/layout/root.html.leex

200
assets/css/_inter.scss

@ -0,0 +1,200 @@
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("../static/fonts/Inter-Thin.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-Thin.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("../static/fonts/Inter-ThinItalic.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-ThinItalic.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("../static/fonts/Inter-ExtraLight.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-ExtraLight.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("../static/fonts/Inter-ExtraLightItalic.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-ExtraLightItalic.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../static/fonts/Inter-Light.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-Light.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("../static/fonts/Inter-LightItalic.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-LightItalic.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../static/fonts/Inter-Regular.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-Regular.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../static/fonts/Inter-Italic.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-Italic.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../static/fonts/Inter-Medium.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-Medium.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../static/fonts/Inter-MediumItalic.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-MediumItalic.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../static/fonts/Inter-SemiBold.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-SemiBold.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("../static/fonts/Inter-SemiBoldItalic.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-SemiBoldItalic.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../static/fonts/Inter-Bold.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-Bold.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("../static/fonts/Inter-BoldItalic.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-BoldItalic.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../static/fonts/Inter-ExtraBold.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-ExtraBold.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("../static/fonts/Inter-ExtraBoldItalic.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-ExtraBoldItalic.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("../static/fonts/Inter-Black.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-Black.woff?v=3.15") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("../static/fonts/Inter-BlackItalic.woff2?v=3.15") format("woff2"),
url("../static/fonts/Inter-BlackItalic.woff?v=3.15") 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("../static/fonts/Inter-roman.var.woff2?v=3.15") format("woff2");
}
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: 'Italic';
src: url("../static/fonts/Inter-italic.var.woff2?v=3.15") 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("../static/fonts/Inter.var.woff2?v=3.15") format("woff2");
}

2
assets/css/app.scss

@ -2,6 +2,8 @@
@import "~bootstrap-icons/font/bootstrap-icons.css";
@import "~easymde/dist/easymde.min.css";
@import "./inter";
@import "./ok.css";
@import "./variables";
@import "./navigation";
@import "./phoenix";

1348
assets/css/ok.css

File diff suppressed because it is too large

BIN
assets/static/fonts/OpenSans-Regular-webfont.woff

Binary file not shown.

7
lib/mirage_web/templates/layout/root.html.leex

@ -6,12 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<%= csrf_meta_tag() %>
<%= live_title_tag assigns[:page_title] || "Inhji.de", suffix: " · Mirage" %>
<!--
<link rel="icon" href='favicon.ico'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<script defer src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>
-->
<link rel="stylesheet" href="https://okcss.netlify.app/ok.min.css" />
<link rel="icon" href='favicon.ico'>
<link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>

Loading…
Cancel
Save