From 4aad35b55e87593c9007812dff9da0f710cbbef7 Mon Sep 17 00:00:00 2001
From: Sheogorath <sheogorath@shivering-isles.com>
Date: Mon, 15 Mar 2021 23:56:48 +0100
Subject: [PATCH] Use NPM packages to provide fonts instead of Google Fonts

This patch uses the fontsource libraries instead of using Google Fonts
in order to provide the fonts in the frontend. This way the web frontend
becomes more private, since it no longer shared visitors IPs with Google
and might even loads faster since modern web browsers isolate site
caches from each other and can re-use connections with HTTP/2 instead of
setting up a new connection to Google.[1]

It's basically the next iteration of my previous PR[2], that no longer
relies on a tool to download the fonts separately, but uses a library
instead. It also relates to issues that have been opened before[3] and
should be easily handled and upgraded by the regular NPM package
tooling[4], solving all related problems to that.

[1]: https://csswizardry.com/2019/05/self-host-your-static-assets/
[2]: https://github.com/badges/shields/pull/4864
[3]: https://github.com/badges/shields/issues/5883
[4]: https://github.com/badges/shields/labels/dependencies
---
 frontend/components/meta.tsx |  6 ++----
 package-lock.json            | 10 ++++++++++
 package.json                 |  2 ++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/components/meta.tsx b/frontend/components/meta.tsx
index f8228730fb8cf..a0f07ab630570 100644
--- a/frontend/components/meta.tsx
+++ b/frontend/components/meta.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 // @ts-ignore
 import favicon from '../images/favicon.png'
+import '@fontsource/lato'
+import '@fontsource/lekton'
 
 const description = `We serve fast and scalable informational images as badges
 for GitHub, Travis CI, Jenkins, WordPress and many more services. Use them to
@@ -17,10 +19,6 @@ export default function Meta(): JSX.Element {
       <meta content="width=device-width,initial-scale=1" name="viewport" />
       <meta content={description} name="description" />
       <link href={favicon} rel="icon" type="image/png" />
-      <link
-        href="https://fonts.googleapis.com/css?family=Lato|Lekton"
-        rel="stylesheet"
-      />
     </Helmet>
   )
 }
diff --git a/package-lock.json b/package-lock.json
index 8130b25af7051..09ee7652fc5b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6620,6 +6620,16 @@
         }
       }
     },
+    "@fontsource/lato": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.2.2.tgz",
+      "integrity": "sha512-ZE5WvqZQZinXpH8MaEiM9klDsUOfCHVQJ/tZKpNVQhi8mHt9WqPCROu500oI5jC3s6jaJuWsM7LfJ1zyEeW+XA=="
+    },
+    "@fontsource/lekton": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@fontsource/lekton/-/lekton-4.2.2.tgz",
+      "integrity": "sha512-lHrW+/y838VhrC2H2Ux41Mnhmoxf0yuzzKmf5VD/wV7vzNn9Y1A/uEC69VByMtp7s5fZ9UOpqBfD8EZDj+ksIQ=="
+    },
     "@graphql-tools/batch-execute": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",
diff --git a/package.json b/package.json
index 779feb7906d07..74ed8d985a9ab 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
     "url": "https://github.com/badges/shields"
   },
   "dependencies": {
+    "@fontsource/lato": "^4.2.2",
+    "@fontsource/lekton": "^4.2.2",
     "@sentry/node": "^6.2.2",
     "@shields_io/camp": "^18.1.1",
     "badge-maker": "file:badge-maker",