Merge pull request #2746 from owid/grapher-redesign-fonts

owid · Oct 11, 2023 · 412f6c2 · 412f6c2
2 parents a754187 + bf38e28
commit 412f6c2
Show file tree

Hide file tree

Showing 11 changed files with 12 additions and 11 deletions.
diff --git a/functions/_common/fonts/Lato-Bold.ttf.bin b/functions/_common/fonts/Lato-Bold.ttf.bin
diff --git a/functions/_common/fonts/Lato-Regular.ttf.bin b/functions/_common/fonts/Lato-Regular.ttf.bin
diff --git a/functions/_common/fonts/LatoLatin-Bold.ttf.bin b/functions/_common/fonts/LatoLatin-Bold.ttf.bin
diff --git a/functions/_common/fonts/LatoLatin-Medium.ttf.bin b/functions/_common/fonts/LatoLatin-Medium.ttf.bin
diff --git a/functions/_common/fonts/LatoLatin-Regular.ttf.bin b/functions/_common/fonts/LatoLatin-Regular.ttf.bin
diff --git a/functions/_common/fonts/PlayfairDisplay-Regular.ttf.bin b/functions/_common/fonts/PlayfairDisplay-Regular.ttf.bin
diff --git a/functions/_common/fonts/PlayfairDisplayLatin-Regular.ttf.bin b/functions/_common/fonts/PlayfairDisplayLatin-Regular.ttf.bin
diff --git a/functions/_common/fonts/PlayfairDisplayLatin-SemiBold.ttf.bin b/functions/_common/fonts/PlayfairDisplayLatin-SemiBold.ttf.bin
diff --git a/functions/_common/grapherRenderer.ts b/functions/_common/grapherRenderer.ts
@@ -7,9 +7,10 @@ import { png } from "itty-router"
 import svg2png_wasm from "../../node_modules/svg2png-wasm/svg2png_wasm_bg.wasm"
 
 // these are regular .ttf files, but cloudflare needs the .bin extension to serve them correctly
-import LatoRegular from "../_common/fonts/LatoLatin-Regular.ttf.bin" // https://raw.githubusercontent.com/googlefonts/LatoGFVersion/main/fonts/Lato-Regular.ttf
-import LatoBold from "../_common/fonts/LatoLatin-Bold.ttf.bin" // https://raw.githubusercontent.com/googlefonts/LatoGFVersion/main/fonts/Lato-Bold.ttf
-import PlayfairRegular from "../_common/fonts/PlayfairDisplayLatin-Regular.ttf.bin" // https://raw.githubusercontent.com/clauseggers/Playfair/1.202/fonts/TTF/PlayfairDisplay-Regular.ttf
+import LatoRegular from "../_common/fonts/LatoLatin-Regular.ttf.bin"
+import LatoMedium from "../_common/fonts/LatoLatin-Medium.ttf.bin"
+import LatoBold from "../_common/fonts/LatoLatin-Bold.ttf.bin"
+import PlayfairSemiBold from "../_common/fonts/PlayfairDisplayLatin-SemiBold.ttf.bin"
 import { Env } from "../grapher/thumbnail/[slug].js"
 
 declare global {
@@ -225,7 +226,7 @@ async function renderSvgToPng(svg: string, options: ImageOptions) {
         // if we include details, pngHeight is only the height of the chart, but we also have an "appendix" at the bottom that we want to include
         height: options.details ? undefined : options.pngHeight,
         backgroundColor: "#fff",
-        fonts: [LatoRegular, LatoBold, PlayfairRegular].map(
+        fonts: [LatoRegular, LatoMedium, LatoBold, PlayfairSemiBold].map(
             (f) => new Uint8Array(f)
         ),
     })

diff --git a/site/GrapherPage.tsx b/site/GrapherPage.tsx
@@ -111,6 +111,13 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
                         ))
                     )
                 )}
+                <link
+                    rel="preload"
+                    href="/fonts/PlayfairDisplayLatin-SemiBold.woff2"
+                    as="font"
+                    type="font/woff2"
+                    crossOrigin="anonymous"
+                />
             </Head>
             <body className={GRAPHER_PAGE_BODY_CLASS}>
                 <SiteHeader baseUrl={baseUrl} />

diff --git a/site/Head.tsx b/site/Head.tsx
@@ -76,13 +76,6 @@ export const Head = (props: {
                 type="font/woff2"
                 crossOrigin="anonymous"
             />
-            <link
-                rel="preload"
-                href="/fonts/PlayfairDisplayLatin-Regular.woff2"
-                as="font"
-                type="font/woff2"
-                crossOrigin="anonymous"
-            />
             <meta property="fb:app_id" content="1149943818390250" />
             <meta property="og:url" content={canonicalUrl} />
             <meta property="og:title" content={pageTitle} />