Add Inter font "locally"

tbrlpld · Jul 23, 2024 · 3d89d56 · 3d89d56
1 parent 46d18ff
commit 3d89d56
Show file tree

Hide file tree

Showing 41 changed files with 68 additions and 3 deletions.
diff --git a/lpld/static/public/fonts/inter/Inter-Black.woff2 b/lpld/static/public/fonts/inter/Inter-Black.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-BlackItalic.woff2 b/lpld/static/public/fonts/inter/Inter-BlackItalic.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-Bold.woff2 b/lpld/static/public/fonts/inter/Inter-Bold.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-BoldItalic.woff2 b/lpld/static/public/fonts/inter/Inter-BoldItalic.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-ExtraBold.woff2 b/lpld/static/public/fonts/inter/Inter-ExtraBold.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-ExtraBoldItalic.woff2 b/lpld/static/public/fonts/inter/Inter-ExtraBoldItalic.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-ExtraLight.woff2 b/lpld/static/public/fonts/inter/Inter-ExtraLight.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-ExtraLightItalic.woff2 b/lpld/static/public/fonts/inter/Inter-ExtraLightItalic.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-Italic.woff2 b/lpld/static/public/fonts/inter/Inter-Italic.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-Light.woff2 b/lpld/static/public/fonts/inter/Inter-Light.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-LightItalic.woff2 b/lpld/static/public/fonts/inter/Inter-LightItalic.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-Medium.woff2 b/lpld/static/public/fonts/inter/Inter-Medium.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-MediumItalic.woff2 b/lpld/static/public/fonts/inter/Inter-MediumItalic.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-Regular.woff2 b/lpld/static/public/fonts/inter/Inter-Regular.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-SemiBold.woff2 b/lpld/static/public/fonts/inter/Inter-SemiBold.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-SemiBoldItalic.woff2 b/lpld/static/public/fonts/inter/Inter-SemiBoldItalic.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-Thin.woff2 b/lpld/static/public/fonts/inter/Inter-Thin.woff2
diff --git a/lpld/static/public/fonts/inter/Inter-ThinItalic.woff2 b/lpld/static/public/fonts/inter/Inter-ThinItalic.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-Black.woff2 b/lpld/static/public/fonts/inter/InterDisplay-Black.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-BlackItalic.woff2 b/lpld/static/public/fonts/inter/InterDisplay-BlackItalic.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-Bold.woff2 b/lpld/static/public/fonts/inter/InterDisplay-Bold.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-BoldItalic.woff2 b/lpld/static/public/fonts/inter/InterDisplay-BoldItalic.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-ExtraBold.woff2 b/lpld/static/public/fonts/inter/InterDisplay-ExtraBold.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-ExtraBoldItalic.woff2 b/lpld/static/public/fonts/inter/InterDisplay-ExtraBoldItalic.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-ExtraLight.woff2 b/lpld/static/public/fonts/inter/InterDisplay-ExtraLight.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-ExtraLightItalic.woff2 b/lpld/static/public/fonts/inter/InterDisplay-ExtraLightItalic.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-Italic.woff2 b/lpld/static/public/fonts/inter/InterDisplay-Italic.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-Light.woff2 b/lpld/static/public/fonts/inter/InterDisplay-Light.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-LightItalic.woff2 b/lpld/static/public/fonts/inter/InterDisplay-LightItalic.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-Medium.woff2 b/lpld/static/public/fonts/inter/InterDisplay-Medium.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-MediumItalic.woff2 b/lpld/static/public/fonts/inter/InterDisplay-MediumItalic.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-Regular.woff2 b/lpld/static/public/fonts/inter/InterDisplay-Regular.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-SemiBold.woff2 b/lpld/static/public/fonts/inter/InterDisplay-SemiBold.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-SemiBoldItalic.woff2 b/lpld/static/public/fonts/inter/InterDisplay-SemiBoldItalic.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-Thin.woff2 b/lpld/static/public/fonts/inter/InterDisplay-Thin.woff2
diff --git a/lpld/static/public/fonts/inter/InterDisplay-ThinItalic.woff2 b/lpld/static/public/fonts/inter/InterDisplay-ThinItalic.woff2
diff --git a/lpld/static/public/fonts/inter/InterVariable-Italic.woff2 b/lpld/static/public/fonts/inter/InterVariable-Italic.woff2
diff --git a/lpld/static/public/fonts/inter/InterVariable.woff2 b/lpld/static/public/fonts/inter/InterVariable.woff2
diff --git a/lpld/static/public/fonts/inter/inter.css b/lpld/static/public/fonts/inter/inter.css
@@ -0,0 +1,57 @@
+/* Variable fonts usage:
+:root { font-family: "Inter", sans-serif; }
+@supports (font-variation-settings: normal) {
+  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
+} */
+@font-face {
+  font-family: InterVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: InterVariable;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("InterVariable-Italic.woff2") format("woff2");
+}
+
+/* static fonts */
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("Inter-Thin.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("Inter-ThinItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("Inter-ExtraLight.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("Inter-ExtraLightItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("Inter-Light.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("Inter-LightItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("Inter-Regular.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("Inter-Italic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("Inter-Medium.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("Inter-MediumItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("Inter-SemiBold.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("Inter-SemiBoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("Inter-Bold.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("Inter-BoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("Inter-ExtraBold.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("Inter-ExtraBoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("Inter-Black.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("Inter-BlackItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("InterDisplay-Thin.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("InterDisplay-ThinItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("InterDisplay-ExtraLight.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("InterDisplay-ExtraLightItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 300; font-display: swap; src: url("InterDisplay-Light.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("InterDisplay-LightItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("InterDisplay-Regular.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("InterDisplay-Italic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("InterDisplay-Medium.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("InterDisplay-MediumItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("InterDisplay-SemiBold.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("InterDisplay-SemiBoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("InterDisplay-Bold.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("InterDisplay-BoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("InterDisplay-ExtraBold.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("InterDisplay-ExtraBoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("InterDisplay-Black.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("InterDisplay-BlackItalic.woff2") format("woff2"); }
diff --git a/lpld/static/src/style.css b/lpld/static/src/style.css
@@ -2,6 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+    font-family: "Inter", sans-serif;
+}
+@supports (font-variation-settings: normal) {
+    :root {
+        font-family: "InterVariable", sans-serif;
+        font-optical-sizing: auto;
+    }
+}
 
 
 @layer components {

diff --git a/lpld/templates/base.html b/lpld/templates/base.html
@@ -21,9 +21,8 @@
         <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
         <link rel="icon" type="image/svg+xml" href="{% static 'favicon/favicon.svg' %}">
         <link rel="icon" type="image/png" href="{% static 'favicon/favicon.png' %}">
-        <link rel="preconnect" href="https://rsms.me/">
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-        <script src="{% static "main.js" %}" async defer></script>
+        <link rel="stylesheet" href="{% static 'fonts/inter/inter.css' %}">
+        <script src="{% static 'main.js' %}" async defer></script>
         {% if plausible_settings.PLAUSIBLE_DOMAIN %}
             {% plausible domain=plausible_settings.PLAUSIBLE_DOMAIN script="script.js" %}
         {% endif %}