Self-hosted fonts

oasisprotocol · Mar 29, 2022 · 111a1be · 111a1be
1 parent 6734b94
commit 111a1be
Show file tree

Hide file tree

Showing 11 changed files with 20 additions and 36 deletions.
diff --git a/internals/getCsp.js b/internals/getCsp.js
@@ -1,5 +1,4 @@
 // @TODO: Future improvements:
-// - remove google exceptions by downloading fonts
 // - remove 'unsafe-inline' style by precomputing theme hash
 // - add report-uri to gather errors if anything was missed
 
@@ -11,12 +10,10 @@ const csp = `
       'report-sample';
     style-src
       'self'
-      fonts.googleapis.com
       'unsafe-inline'
       'report-sample';
     font-src
-      'self'
-      fonts.gstatic.com;
+      'self';
     connect-src
       'self'
       grpc.oasis.dev

diff --git a/package.json b/package.json
@@ -83,7 +83,6 @@
     "connected-react-router": "6.9.2",
     "copy-to-clipboard": "3.3.1",
     "cross-env": "7.0.3",
-    "fontfaceobserver": "2.1.0",
     "grommet": "2.21.0",
     "grommet-icons": "4.7.0",
     "husky": "7.0.4",
@@ -124,7 +123,6 @@
     "@testing-library/react": "12.1.4",
     "@testing-library/user-event": "13.5.0",
     "@types/body-scroll-lock": "3.1.0",
-    "@types/fontfaceobserver": "2.1.0",
     "@types/jest": "27.4.1",
     "@types/jest-when": "3.5.0",
     "@types/node": "16.11.21",
@@ -201,7 +199,8 @@
   "parcel-namer-rewrite": {
     "developmentHashing": true,
     "rules": {
-      "(.*).png": "$1.png"
+      "(.*).png": "$1.png",
+      "(.*).woff(.*)": "$1.woff$2"
     },
     "silent": true
   }

diff --git a/src/fonts/roboto-mono-v13-latin-300.woff b/src/fonts/roboto-mono-v13-latin-300.woff
diff --git a/src/fonts/roboto-mono-v13-latin-300.woff2 b/src/fonts/roboto-mono-v13-latin-300.woff2
diff --git a/src/fonts/rubik-v19-latin-300.woff b/src/fonts/rubik-v19-latin-300.woff
diff --git a/src/fonts/rubik-v19-latin-300.woff2 b/src/fonts/rubik-v19-latin-300.woff2
diff --git a/src/index.html b/src/index.html
@@ -19,9 +19,5 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="./index.tsx"></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap"
-      rel="stylesheet"
-    />
   </body>
 </html>
diff --git a/src/index.tsx b/src/index.tsx
@@ -11,7 +11,6 @@ import 'react-app-polyfill/stable'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
-import FontFaceObserver from 'fontfaceobserver'
 
 // Use consistent styling
 import 'sanitize.css/sanitize.css'
@@ -32,15 +31,6 @@ import './locales/i18n'
 // Fonts
 import './styles/main.css'
 
-// Observe loading of Inter (to remove 'Inter', remove the <link> tag in
-// the index.html file and this observer)
-const openSansObserver = new FontFaceObserver('Inter', {})
-
-// When Inter is loaded, add a font-family using Inter to the body
-openSansObserver.load().then(() => {
-  document.body.classList.add('fontLoaded')
-})
-
 const store = configureAppStore()
 const MOUNT_NODE = document.getElementById('root') as HTMLElement
 

diff --git a/src/styles/global-styles.ts b/src/styles/global-styles.ts
@@ -15,10 +15,6 @@ export const GlobalStyle = createGlobalStyle`
     background-color: ${p => p.theme.background};
   }
 
-  body.fontLoaded {
-    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  }
-
   p,
   label {
     line-height: 1.5em;

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -1,4 +1,20 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Rubik:wght@300&display=swap");
+/* rubik-300 - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 300;
+  src: url('./../fonts/rubik-v19-latin-300.woff2') format('woff2'),
+    url('./../fonts/rubik-v19-latin-300.woff') format('woff');
+}
+
+/* roboto-mono-300 - latin */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: url('./../fonts/roboto-mono-v13-latin-300.woff2') format('woff2'),
+    url('./../fonts/roboto-mono-v13-latin-300.woff') format('woff');
+}
 
 a {
   color: inherit; /* blue colors for links too */

diff --git a/yarn.lock b/yarn.lock
@@ -3746,11 +3746,6 @@
   resolved "https://registry.npmjs.org/@types/fined/-/fined-1.1.2.tgz"
   integrity sha512-hzzTS+X9EqDhx4vwdch/DOZci/bfh5J6Nyz8lqvyfBg2ROx2fPafX+LpDfpVgSvQKj0EYkwTYpBO3z2etwbkOw==
 
-"@types/fontfaceobserver@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@types/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#9ec2eabadfcaaf8c68c5e1254d19f5a293d132b4"
-  integrity sha512-Vqf183RAiFdIjUi4asKqogf2HIfLDnxn+dQo9GCpnsU5QrrsLMA2bkJU1dHRudQlizLybWD61Csd1zAgUQ3JKQ==
-
 "@types/glob@*", "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz"
@@ -7812,11 +7807,6 @@ flush-write-stream@^1.0.2:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-fontfaceobserver@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz"
-  integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==
-
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"