use new Manrope font, remove external font dep

2 years ago · ae315f1789
parent 4782e72d88
commit ae315f1789
5 changed files with 44 additions and 10 deletions
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@ -3,6 +3,7 @@ import { SWRConfig } from "swr";

 import "styles/globals.css";
 import "styles/theme.css";
+import "styles/manrope.css";

 import "utils/i18n";
 import { ColorProvider } from "utils/color-context";
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@ -1,16 +1,8 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Html, Main, NextScript } from "next/document";

 export default function Document() {
  return (
    <Html>
-      <Head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap"
-          rel="stylesheet"
-        />
-      </Head>
      <body className="relative w-full h-full bg-theme-50 dark:bg-theme-800 transition duration-150 ease-in-out">
        <Main />
        <NextScript />
--- a/src/styles/font/Manrope.woff2
+++ b/src/styles/font/Manrope.woff2
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -10,5 +10,5 @@
 }

 body {
-  font-family: "Poppins", sans-serif;
+  font-family: Manrope, "Poppins", sans-serif;
 }
--- a/src/styles/manrope.css
+++ b/src/styles/manrope.css
@ -0,0 +1,41 @@
+@font-face {
+  font-family: "Manrope";
+  font-weight: 200;
+  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Manrope";
+  font-weight: 300;
+  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Manrope";
+  font-weight: 400;
+  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Manrope";
+  font-weight: 500;
+  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Manrope";
+  font-weight: 600;
+  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Manrope";
+  font-weight: 700;
+  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Manrope";
+  font-weight: 800;
+  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+}