Improve typography perf (#69)

* Remove italics - decrease the need for fonts to be loaded, italics not needed here really and this does improve readability in the end as well * Add font-display: swap for fontfaces - uses the trick from https://github.com/KyleAMathews/typography.js/issues/211\#issuecomment-494001270 (while the actual feature PR is still not merged)
lehtoinen · Jul 10, 2020 · f24fe40 · f24fe40
1 parent 9356e3c
commit f24fe40
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 7 deletions.
diff --git a/src/components/FixturesList/FixtureListEntry.module.css b/src/components/FixturesList/FixtureListEntry.module.css
@@ -15,7 +15,6 @@
 
 .subject {
   font-size: 1.1em;
-  font-style: italic;
 }
 
 .info {
@@ -25,13 +24,9 @@
   letter-spacing: 0.05em;
 }
 
-.competition {
-  font-style: normal;
-}
-
 .location {
   color: var(--color-grey);
-  border-left: 1px solid #e6e6e6;
+  border-left: 1px solid #c6c6c6;
   padding-left: 0.75em;
   margin: 0.4em;
 }
diff --git a/src/utils/typography.js b/src/utils/typography.js
@@ -23,7 +23,7 @@ const typography = new Typography({
       },
       {
         name: 'Lato',
-        styles: ['400', '400i', '700', '700i', '900'],
+        styles: ['400', '700&display=swap'],
       },
     ],
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,7 @@ const typography = new Typography({ @@
           },
           {
             name: 'Lato',
-            styles: ['400', '400i', '700', '700i', '900'],
+            styles: ['400', '700&display=swap'],
           },
         ],
       },
@@ Expand Down @@