Merge pull request #1177 from prezly/feature/dev-13354-support-new-fo…

…nts-in-bea [DEV-13354] Add support for more fonts
prezly · Aug 19, 2024 · 67e2f05 · 67e2f05
2 parents 50338a4 + 2dfd4af
commit 67e2f05
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 5 deletions.
diff --git a/modules/Head/components/BrandingSettings.tsx b/modules/Head/components/BrandingSettings.tsx
@@ -1,5 +1,10 @@
 import { withoutUndefined } from '@/utils';
-import { DEFAULT_THEME_SETTINGS, getGoogleFontName, type ThemeSettings } from 'theme-settings';
+import {
+    DEFAULT_THEME_SETTINGS,
+    getGoogleFontName,
+    getRelatedFont,
+    type ThemeSettings,
+} from 'theme-settings';
 
 import { getCssVariables } from './getCssVariables';
 import { InjectCssVariables } from './InjectCssVariables';
@@ -14,12 +19,27 @@ export function BrandingSettings({ settings }: Props) {
         ...withoutUndefined(settings),
     };
 
-    const googleFontName = getGoogleFontName(compiledSettings.font).replace(' ', '+');
+    const primaryGoogleFontName = getGoogleFontName(compiledSettings.font).replace(' ', '+');
+    const relatedFont = getRelatedFont(compiledSettings.font);
+
+    let families = [];
+    if (relatedFont) {
+        const relatedGoogleFontName = getGoogleFontName(relatedFont).replace(' ', '+');
+
+        families = [
+            `${primaryGoogleFontName}:wght@600`,
+            `${relatedGoogleFontName}:wght@400;500;600;700;900`,
+        ];
+    } else {
+        families = [`${primaryGoogleFontName}:wght@400;500;600;700;900`];
+    }
 
     return (
         <>
             <link
-                href={`https://fonts.googleapis.com/css2?family=${googleFontName}:wght@400;500;600;700;900&display=swap`}
+                href={`https://fonts.googleapis.com/css2?display=swap&${families
+                    .map((family) => `family=${family}`)
+                    .join('&')}`}
                 rel="stylesheet"
             />
 

diff --git a/modules/Head/components/getCssVariables.ts b/modules/Head/components/getCssVariables.ts
@@ -1,12 +1,21 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import tinycolor from 'tinycolor2';
 
-import { Font, FONT_FAMILY, type ThemeSettings } from 'theme-settings';
+import { Font, FONT_FAMILY, getRelatedFont, type ThemeSettings } from 'theme-settings';
 
 function getFontFamily(font: Font): string {
     return FONT_FAMILY[font] || FONT_FAMILY[Font.INTER];
 }
 
+function getSecondaryFontFamily(font: Font): string {
+    switch (getRelatedFont(font)) {
+        case Font.ALEGREYA_SANS:
+            return FONT_FAMILY[Font.ALEGREYA_SANS];
+        default:
+            return getFontFamily(font);
+    }
+}
+
 export function getCssVariables(settings: ThemeSettings): Record<string, string> {
     const {
         accent_color,
@@ -42,6 +51,7 @@ export function getCssVariables(settings: ThemeSettings): Record<string, string>
 
     return {
         '--prezly-font-family': getFontFamily(font),
+        '--prezly-font-family-secondary': getSecondaryFontFamily(font),
         '--prezly-border-color': borderColor.toHex8String(),
         '--prezly-border-color-secondary': borderColorSecondary.toHex8String(),
         '--prezly-text-color': text_color,

diff --git a/styles/_typography.scss b/styles/_typography.scss
@@ -1,6 +1,6 @@
 body {
     font-size: 16px;
-    font-family: var(--prezly-font-family);
+    font-family: var(--prezly-font-family-secondary);
     color: var(--prezly-text-color);
     word-break: break-word;
     background: var(--prezly-background-color);
@@ -9,16 +9,22 @@ body {
 h1,
 .h1 {
     @include heading-1;
+
+    font-family: var(--prezly-font-family);
 }
 
 h2,
 .h2 {
     @include heading-2;
+
+    font-family: var(--prezly-font-family);
 }
 
 h3,
 .h3 {
     @include heading-3;
+
+    font-family: var(--prezly-font-family);
 }
 
 p,

diff --git a/theme-settings.ts b/theme-settings.ts
@@ -1,7 +1,12 @@
 export enum Font {
+    ALEGREYA = 'alegreya',
+    ALEGREYA_SANS = 'alegreya_sans',
     INTER = 'inter',
     MERRIWEATHER = 'merriweather',
+    MULISH = 'mulish',
+    NUNITO = 'nunito',
     OPEN_SANS = 'open_sans',
+    PLAYFAIR_DISPLAY = 'playfair_display',
     PT_SERIF = 'pt_serif',
     ROBOTO = 'roboto',
     SOURCE_CODE_PRO = 'source_code_pro',
@@ -48,20 +53,45 @@ export const DEFAULT_THEME_SETTINGS: ThemeSettings = {
 };
 
 export const FONT_FAMILY = {
+    [Font.ALEGREYA]: "'Alegreya', serif",
+    [Font.ALEGREYA_SANS]: "'Alegreya Sans', sans-serif",
     [Font.INTER]: 'Inter, sans-serif',
     [Font.MERRIWEATHER]: 'Merriweather, serif',
+    [Font.MULISH]: 'Mulish, sans-serif',
+    [Font.NUNITO]: "'Nunito', sans-serif",
     [Font.OPEN_SANS]: "'Open Sans', sans-serif",
+    [Font.PLAYFAIR_DISPLAY]: "'Playfair Display', serif",
     [Font.PT_SERIF]: "'PT Serif', serif",
     [Font.ROBOTO]: 'Roboto, sans-serif',
     [Font.SOURCE_CODE_PRO]: "'Source Code Pro', monospace",
 };
 
+export function getRelatedFont(font: Font): Font | null {
+    switch (font) {
+        case Font.ALEGREYA:
+        case Font.PLAYFAIR_DISPLAY:
+            return Font.ALEGREYA_SANS;
+        default:
+            return null;
+    }
+}
+
 export function getGoogleFontName(font: Font): string {
     switch (font) {
+        case Font.ALEGREYA:
+            return 'Alegreya';
+        case Font.ALEGREYA_SANS:
+            return 'Alegreya Sans';
         case Font.MERRIWEATHER:
             return 'Merriweather';
+        case Font.MULISH:
+            return 'Mullish';
+        case Font.NUNITO:
+            return 'Nunito';
         case Font.OPEN_SANS:
             return 'Open Sans';
+        case Font.PLAYFAIR_DISPLAY:
+            return 'Playfair Display';
         case Font.PT_SERIF:
             return 'PT Serif';
         case Font.ROBOTO: