Skip to content

Commit

Permalink
feat: improve font-loading and fallbacks
Browse files Browse the repository at this point in the history
  • Loading branch information
@aeneasr
aeneasr committed Dec 24, 2024
1 parent 5cf903b commit 86b9081
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 25 deletions.
47 changes: 43 additions & 4 deletions docusaurus.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright © 2022 Ory Corp
// SPDX-License-Identifier: Apache-2.0

import type { Config } from "@docusaurus/types"
import type {Config} from "@docusaurus/types"
import type * as Preset from "@docusaurus/preset-classic"

import lightTheme from "./src/utils/prismLight.mjs"
Expand Down Expand Up @@ -56,17 +56,17 @@ const config: Config = {
{
className: "theme-code-block-highlighted-line",
line: "highlight-next-line",
block: { start: "highlight-start", end: "highlight-end" },
block: {start: "highlight-start", end: "highlight-end"},
},
{
className: "code-block-delete-line",
line: "delete-next-line",
block: { start: "delete-lines-start", end: "delete-lines-end" },
block: {start: "delete-lines-start", end: "delete-lines-end"},
},
{
className: "code-block-add-line",
line: "add-next-line",
block: { start: "add-lines-start", end: "add-lines-end" },
block: {start: "add-lines-start", end: "add-lines-end"},
},
{
className: "copyright-2022-ory-corp",
Expand Down Expand Up @@ -276,6 +276,45 @@ const config: Config = {
"@docusaurus/theme-search-algolia",
"docusaurus-theme-redoc",
],
headTags: [
"InterVariable.woff2?v=4.0",
"Inter-Regular.woff2?v=4.0",
"Inter-Italic.woff2?v=4.0",
"Inter-Medium.woff2?v=4.0",
"Inter-MediumItalic.woff2?v=4.0",
"Inter-SemiBold.woff2?v=4.0",
"Inter-SemiBoldItalic.woff2?v=4.0",
"Inter-Bold.woff2?v=4.0",
"Inter-BoldItalic.woff2?v=4.0",
"Inter-ExtraBold.woff2?v=4.0",
"Inter-ExtraBoldItalic.woff2?v=4.0",
"Inter-Black.woff2?v=4.0",
"Inter-BlackItalic.woff2?v=4.0",
"JetBrainsMono-Bold.woff2",
"JetBrainsMono-BoldItalic.woff2",
"JetBrainsMono-ExtraBold.woff2",
"JetBrainsMono-ExtraBoldItalic.woff2",
"JetBrainsMono-ExtraLight.woff2",
"JetBrainsMono-ExtraLightItalic.woff2",
"JetBrainsMono-Italic.woff2",
"JetBrainsMono-Light.woff2",
"JetBrainsMono-LightItalic.woff2",
"JetBrainsMono-Medium.woff2",
"JetBrainsMono-MediumItalic.woff2",
"JetBrainsMono-Regular.woff2",
"JetBrainsMono-SemiBold.woff2",
"JetBrainsMono-SemiBoldItalic.woff2",
"JetBrainsMono-Thin.woff2",
"JetBrainsMono-ThinItalic.woff2"].map((font: string) => ({
tagName: "link",
attributes: {
rel: "preload",
type: "font/woff2",
as: "font",
crossOrigin: "anonymous",
href: `/fonts/${font.includes("Inter") ? "Inter" : "JetBrainsMono"}/${font}`,
},
})),
scripts: [
// Needed as a workaround for https://answers.netlify.com/t/trailing-slash-missing-on-proxied-netlify-site/36367
"/docs/scripts/redirect.js",
Expand Down
61 changes: 45 additions & 16 deletions src/css/fonts.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@
font-display: swap;
src: url("/fonts/Inter/InterVariable.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: InterVariable;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/Inter/InterVariable-Italic.woff2?v=4.0") format("woff2");
}

/* legacy name "Inter var" (Oct 2023) */
@font-face {
font-family: "Inter var";
Expand All @@ -20,13 +22,15 @@
font-display: swap;
src: url("/fonts/Inter/InterVariable.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: "Inter var";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/Inter/InterVariable-Italic.woff2?v=4.0") format("woff2");
}

/* static fonts */
@font-face {
font-family: Inter;
Expand All @@ -35,118 +39,135 @@
font-display: swap;
src: url("/fonts/Inter/Inter-Thin.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("/fonts/Inter/Inter-ThinItalic.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("/fonts/Inter/Inter-ExtraLight.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("/fonts/Inter/Inter-ExtraLightItalic.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/fonts/Inter/Inter-Light.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/fonts/Inter/Inter-LightItalic.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/Inter/Inter-Regular.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/fonts/Inter/Inter-Italic.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/Inter/Inter-Medium.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/fonts/Inter/Inter-MediumItalic.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/Inter/Inter-SemiBold.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/fonts/Inter/Inter-SemiBoldItalic.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/Inter/Inter-Bold.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/fonts/Inter/Inter-BoldItalic.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/fonts/Inter/Inter-ExtraBold.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/fonts/Inter/Inter-ExtraBoldItalic.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/fonts/Inter/Inter-Black.woff2?v=4.0") format("woff2");
}

@font-face {
font-family: Inter;
font-style: italic;
Expand All @@ -157,120 +178,128 @@

@font-face {
font-family: "JetBrains Mono";
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2") format("woff2");
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2")
format("woff2");
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2") format("woff2");
font-weight: bold;
font-style: italic;
}

@font-face {
font-family: "JetBrains Mono";
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
}

@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.woff2")
format("woff2");
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
font-weight: 800;
font-style: italic;
}

@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraLight.woff2")
format("woff2");
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraLight.woff2") format("woff2");
font-weight: 200;
font-style: normal;
}

@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.woff2")
format("woff2");
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.woff2") format("woff2");
font-weight: 200;
font-style: italic;
}

@font-face {
font-family: "JetBrains Mono";
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-Italic.woff2") format("woff2");
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: "JetBrains Mono";
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/JetBrainsMono/JetBrainsMono-LightItalic.woff2")
format("woff2");
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-LightItalic.woff2") format("woff2");
font-weight: 300;
font-style: italic;
}

@font-face {
font-family: "JetBrains Mono";
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/JetBrainsMono/JetBrainsMono-MediumItalic.woff2")
format("woff2");
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-MediumItalic.woff2") format("woff2");
font-weight: 500;
font-style: italic;
}

@font-face {
font-family: "JetBrains Mono";
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "JetBrains Mono";
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.woff2")
format("woff2");
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.woff2") format("woff2");
font-weight: 600;
font-style: italic;
}

@font-face {
font-family: "JetBrains Mono";
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-Thin.woff2") format("woff2");
font-weight: 100;
font-style: normal;
}

@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/JetBrainsMono/JetBrainsMono-ThinItalic.woff2")
format("woff2");
font-display: swap;
src: url("/fonts/JetBrainsMono/JetBrainsMono-ThinItalic.woff2") format("woff2");
font-weight: 100;
font-style: italic;
}
Loading

0 comments on commit 86b9081

Please sign in to comment.