Browse Source

hopefully improve font rendering

Ben Phelps 2 years ago
parent
commit
09b4de08e3
3 changed files with 9 additions and 39 deletions
  1. BIN
      src/styles/font/Manrope.ttf
  2. 3 0
      src/styles/globals.css
  3. 6 39
      src/styles/manrope.css

BIN
src/styles/font/Manrope.ttf


+ 3 - 0
src/styles/globals.css

@@ -13,6 +13,9 @@ html,
 body {
   font-family: Manrope, "Manrope-Fallback", Arial, sans-serif;
   overflow: hidden;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 #page_wrapper {

+ 6 - 39
src/styles/manrope.css

@@ -13,49 +13,16 @@
 
 @font-face {
   font-family: "Manrope";
-  font-weight: 200;
-  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+  font-weight: 200 800;
+  font-style: normal;
+  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2"), url("./font/Manrope.ttf") format("ttf");
   font-display: swap;
 }
 
 @font-face {
   font-family: "Manrope";
-  font-weight: 300;
-  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Manrope";
-  font-weight: 400;
-  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Manrope";
-  font-weight: 500;
-  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Manrope";
-  font-weight: 600;
-  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Manrope";
-  font-weight: 700;
-  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Manrope";
-  font-weight: 800;
-  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+  font-weight: 200 800;
+  fint-style: italic;
+  src: local("Manrope"), url("./font/Manrope.woff2") format("woff2"), url("./font/Manrope.ttf") format("ttf");
   font-display: swap;
 }