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]: #4864
[3]: #5883
[4]: https://github.com/badges/shields/labels/dependencies

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>
   )
 }

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",