v1.0.0

Materia-Official-Font/WOFF2/Materia.css

@@ -0,0 +1,227 @@
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: normal;
+  font-weight: 100;
+  src: url("./Materia-Thin.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: italic;
+  font-weight: 100;
+  src: url("./Materia-ThinItalic.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: normal;
+  font-weight: 200;
+  src: url("./Materia-ExtraLight.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: italic;
+  font-weight: 200;
+  src: url("./Materia-ExtraLightItalic.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: normal;
+  font-weight: 300;
+  src: url("./Materia-Light.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: italic;
+  font-weight: 300;
+  src: url("./Materia-LightItalic.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: normal;
+  font-weight: 400;
+  src: url("./Materia-Regular.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: italic;
+  font-weight: 400;
+  src: url("./Materia-Italic.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: normal;
+  font-weight: 500;
+  src: url("./Materia-Medium.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: italic;
+  font-weight: 500;
+  src: url("./Materia-MediumItalic.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: normal;
+  font-weight: 600;
+  src: url("./Materia-SemiBold.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: italic;
+  font-weight: 600;
+  src: url("./Materia-SemiBoldItalic.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: normal;
+  font-weight: 700;
+  src: url("./Materia-Bold.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: italic;
+  font-weight: 700;
+  src: url("./Materia-BoldItalic.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: normal;
+  font-weight: 800;
+  src: url("./Materia-ExtraBold.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: italic;
+  font-weight: 800;
+  src: url("./Materia-ExtraBoldItalic.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: normal;
+  font-weight: 900;
+  src: url("./Materia-Black.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+@font-face {
+  font-display: swap;
+  font-family: "Materia Webfont";
+  font-style: italic;
+  font-weight: 900;
+  src: url("./Materia-BlackItalic.woff2") format("woff2");
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: auto;
+  font-variant-ligatures: normal;
+  font-feature-settings: "liga" 1;
+}
+:root {
+  --materia-webfont:
+    "Materia Webfont", "Materia", "Inter", "Inter Tight", system-ui,
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+}
+#materia-webfont,
+.materia-webfont {
+  font-family: var(--materia-webfont);
+}

Materia-Official-Font/WOFF2/Materia.html

@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Materia Webfont</title>
+    <link
+      rel="shortcut icon"
+      type="image/png"
+      href="../../Materia-Logomark-Logotype/PNG/Materia-Logomark_White-on-Coral_Gap.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      href="../../Materia-Logomark-Logotype/PNG/Materia-Logomark_White-on-Coral_Gap.png"
+    />
+    <!--
+    <link
+      rel="shortcut icon"
+      type="image/png"
+      href="../../Materia-Logomark-Logotype/PNG/Materia-Logomark_Coral-on-White_Gap.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      href="../../Materia-Logomark-Logotype/PNG/Materia-Logomark_Coral-on-White_Gap.png"
+    />
+    -->
+    <style>
+      @import url("./Materia.min.css");
+      body {
+        background: rgba(255,133,89,1);
+        color: rgba(255,255,255,1);
+        margin: 1em;
+        padding: 2em;
+        text-align: left;
+      }
+      p {
+        line-height: 1;
+        font-size: 2em;
+      }
+      .n100 {
+        font-weight: 100;
+      }
+      .n200 {
+        font-weight: 200;
+      }
+      .n300 {
+        font-weight: 300;
+      }
+      .n400 {
+        font-weight: 400;
+      }
+      .n500 {
+        font-weight: 500;
+      }
+      .n600 {
+        font-weight: 600;
+      }
+      .n700 {
+        font-weight: 700;
+      }
+      .n800 {
+        font-weight: 800;
+      }
+      .n900 {
+        font-weight: 900;
+      }
+      .i {
+        font-style: italic;
+      }
+      .materia-logomark,
+      .materia-logotype {
+        line-height: 1;
+        font-size: 4em;
+      }
+      .ligaless {
+        font-feature-settings: "liga" 0;
+        font-weight: 200;
+        color: rgba(255,255,255,.3);
+        font-size: 0.5em;
+      }
+    </style>
+  </head>
+  <body class="materia-webfont">
+    <p class="materia-logomark">:M: <span class="ligaless"> :M:</span></p>
+    <p class="materia-logotype">
+      :Materia: <span class="ligaless"> :Materia:</span>
+    </p>
+    <p class="n100">Materia Webfont 100</p>
+    <p class="n100 i">Materia Webfont 100 Italic</p>
+    <p class="n200">Materia Webfont 200</p>
+    <p class="n200 i">Materia Webfont 200 Italic</p>
+    <p class="n300">Materia Webfont 300</p>
+    <p class="n300 i">Materia Webfont 300 Italic</p>
+    <p class="n400">Materia Webfont 400</p>
+    <p class="n400 i">Materia Webfont 400 Italic</p>
+    <p class="n500">Materia Webfont 500</p>
+    <p class="n500 i">Materia Webfont 500 Italic</p>
+    <p class="n600">Materia Webfont 600</p>
+    <p class="n600 i">Materia Webfont 600 Italic</p>
+    <p class="n700">Materia Webfont 700</p>
+    <p class="n700 i">Materia Webfont 700 Italic</p>
+    <p class="n800">Materia Webfont 800</p>
+    <p class="n800 i">Materia Webfont 800 Italic</p>
+    <p class="n900">Materia Webfont 900</p>
+    <p class="n900 i">Materia Webfont 900 Italic</p>
+  </body>
+</html>