Merge pull request #747 from MuckRock/allanlasser/issue733

Loads font glyphs based on locale
MuckRock · Oct 1, 2024 · 45c2bcc · 45c2bcc
2 parents ff3ed68 + b6c8487
commit 45c2bcc
Show file tree

Hide file tree

Showing 19 changed files with 79 additions and 86 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1 +1 @@
-<link rel="stylesheet" href="/fonts.css" />
+<link rel="stylesheet" href="/fonts-latin.css" />
diff --git a/src/app.html b/src/app.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <link rel="stylesheet" href="%sveltekit.assets%/fonts.css" />
 
     %sveltekit.head%
   </head>

diff --git a/src/main.html b/src/main.html
@@ -7,7 +7,7 @@
     <title>DocumentCloud</title>
 
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="stylesheet" href="/fonts.css" />
+    <link rel="stylesheet" href="/fonts-latin.css" />
   </head>
 
   <body></body>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,7 +1,19 @@
 <script>
+  import { browser } from "$app/environment";
+  import { locale } from "svelte-i18n";
+
   import "@/style/variables.css";
   import "@/style/global.css";
   import "@/style/kit.css";
+
+  $: useCyrillicCharset = browser ? ["uk", "ru"].includes($locale) : false;
 </script>
 
+<svelte:head>
+  <link rel="stylesheet" href="/fonts-latin.css" />
+  {#if useCyrillicCharset}
+    <link rel="stylesheet" href="/fonts-cyrillic.css" />
+  {/if}
+</svelte:head>
+
 <slot />
diff --git a/src/style/fonts.scss b/src/style/fonts.scss
diff --git a/static/fonts-cyrillic.css b/static/fonts-cyrillic.css
@@ -0,0 +1,55 @@
+/* source-sans-pro-regular - cyrillic */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/fonts/source-sans-pro-cyrillic-regular.woff") format("woff");
+  src: local(""), url("/fonts/source-sans-pro-cyrillic-regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  src: url("/fonts/source-sans-pro-cyrillic-italic.woff") format("woff");
+  src: local(""), url("/fonts/source-sans-pro-cyrillic-italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 600;
+  src: url("/fonts/source-sans-pro-cyrillic-600.woff") format("woff");
+  src: local(""), url("/fonts/source-sans-pro-cyrillic-600.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  src: url("/fonts/source-sans-pro-cyrillic-700.woff") format("woff");
+  src: local(""), url("/fonts/source-sans-pro-cyrillic-700.woff2") format("woff2");
+}
+
+/* Limited Latin charset for Langauge menus */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 600;
+  src: url("/fonts/source-sans-pro-latin-menuset-600.woff") format("woff");
+  src: local(""), url("/fonts/source-sans-pro-latin-menuset-600.woff2") format("woff2");
+}
+
+/* Source Code Pro */
+@font-face {
+  font-family: "Source Code Pro";
+  font-style: normal;
+  src: url("/fonts/SourceCodePro-VariableFont_wght.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  font-style: italic;
+  src: url("/fonts/SourceCodePro-Italic-VariableFont_wght.ttf")
+    format("truetype");
+}
diff --git a/public/fonts.css → static/fonts-latin.css b/public/fonts.css → static/fonts-latin.css
@@ -82,6 +82,15 @@
       format("svg"); /* Legacy iOS */
 }
 
+/* Limited Cyrillic Charset for Language Menu */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 600;
+  src: url("/fonts/source-sans-pro-cyrillic-menuset-600.woff") format("woff");
+  src: url("/fonts/source-sans-pro-cyrillic-menuset-600.woff2") format("woff2");
+}
+
 /* Source Code Pro */
 @font-face {
   font-family: "Source Code Pro";
@@ -95,3 +104,4 @@
   src: url("/fonts/SourceCodePro-Italic-VariableFont_wght.ttf")
     format("truetype");
 }
+
diff --git a/static/fonts/source-sans-pro-cyrillic-600.woff b/static/fonts/source-sans-pro-cyrillic-600.woff
diff --git a/static/fonts/source-sans-pro-cyrillic-600.woff2 b/static/fonts/source-sans-pro-cyrillic-600.woff2
diff --git a/static/fonts/source-sans-pro-cyrillic-700.woff b/static/fonts/source-sans-pro-cyrillic-700.woff
diff --git a/static/fonts/source-sans-pro-cyrillic-700.woff2 b/static/fonts/source-sans-pro-cyrillic-700.woff2
diff --git a/static/fonts/source-sans-pro-cyrillic-italic.woff b/static/fonts/source-sans-pro-cyrillic-italic.woff
diff --git a/static/fonts/source-sans-pro-cyrillic-italic.woff2 b/static/fonts/source-sans-pro-cyrillic-italic.woff2
diff --git a/static/fonts/source-sans-pro-cyrillic-menuset-600.woff b/static/fonts/source-sans-pro-cyrillic-menuset-600.woff
diff --git a/static/fonts/source-sans-pro-cyrillic-menuset-600.woff2 b/static/fonts/source-sans-pro-cyrillic-menuset-600.woff2
diff --git a/static/fonts/source-sans-pro-cyrillic-regular.woff b/static/fonts/source-sans-pro-cyrillic-regular.woff
diff --git a/static/fonts/source-sans-pro-cyrillic-regular.woff2 b/static/fonts/source-sans-pro-cyrillic-regular.woff2
diff --git a/static/fonts/source-sans-pro-latin-menuset-600.woff b/static/fonts/source-sans-pro-latin-menuset-600.woff
diff --git a/static/fonts/source-sans-pro-latin-menuset-600.woff2 b/static/fonts/source-sans-pro-latin-menuset-600.woff2