Make web font parameter accept more than one font resource #1346

nothingnesses · 2024-03-07T11:55:39Z

nothingnesses
Mar 7, 2024

Goals

Allow more than one font resource to be used by the <Font> component.

Background

The src CSS descriptor can accept more than one font resource, which the <Font> component currently doesn't.

Proposal

I don't really know TypeScript, but you probably want something like:

import * as React from "react";

type FallbackFont =
  | "Arial"
  | "Helvetica"
  | "Verdana"
  | "Georgia"
  | "Times New Roman"
  | "serif"
  | "sans-serif"
  | "monospace"
  | "cursive"
  | "fantasy";

type FontFormat =
  | "woff"
  | "woff2"
  | "truetype"
  | "opentype"
  | "embedded-opentype"
  | "svg";

type FontWeight = React.CSSProperties["fontWeight"];
type FontStyle = React.CSSProperties["fontStyle"];

+type WebFont = {
+  url: string;
+  format: FontFormat;
+};

export interface FontProps {
  /** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */
  fontFamily: string;
  /** An array is possible, but the order of the array is the priority order */
  fallbackFontFamily: FallbackFont | FallbackFont[];
  /** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */
+  webFont: WebFont | WebFont[] | undefined;
  /** Default: 'normal' */
  fontStyle?: FontStyle;
  /** Default: 400 */
  fontWeight?: FontWeight;
}

/** The component MUST be place inside the <head> tag */
export const Font: React.FC<Readonly<FontProps>> = ({
  fontFamily,
  fallbackFontFamily,
  webFont,
  fontStyle = "normal",
  fontWeight = 400,
}) => {
+  const src = (() => {
+    switch (true) {
+      case webFont === undefined:
+        return "";
+      case Array.isArray(webFont):
+        return `src: ${
+          webFont
+            .map((w: WebFont) => `url(${w.url}) format('${w.format}`)
+            .join(", ")
+        };`;
+      default:
+        return `src: url(${webFont.url}) format('${webFont.format}');`;
+    }
+  })();

  const style = `
    @font-face {
      font-family: '${fontFamily}';
      font-style: ${fontStyle};
      font-weight: ${fontWeight};
      mso-font-alt: '${
        Array.isArray(fallbackFontFamily)
          ? fallbackFontFamily[0]
          : fallbackFontFamily
      }';
      ${src}
    }

    * {
      font-family: '${fontFamily}', ${
        Array.isArray(fallbackFontFamily)
          ? fallbackFontFamily.join(", ")
          : fallbackFontFamily
      };
    }
  `;
  return <style dangerouslySetInnerHTML={{ __html: style }} />;
};

Font.displayName = "Font";

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Make web font parameter accept more than one font resource #1346

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Make web font parameter accept more than one font resource #1346

Uh oh!

Uh oh!

nothingnesses Mar 7, 2024

Goals

Background

Proposal

Replies: 0 comments

nothingnesses
Mar 7, 2024