--- a/src/utils/FontManager.ts +++ b/src/utils/FontManager.ts @@ -108,20 +108,6 @@ } colrFontCheckStarted = true; - if (await isColrFontSupported()) { - const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2")}')`; - document.fonts.add(new FontFace("Twemoji", path, {})); - // For at least Chrome on Windows 10, we have to explictly add extra - // weights for the emoji to appear in bold messages, etc. - document.fonts.add(new FontFace("Twemoji", path, { weight: "600" })); - document.fonts.add(new FontFace("Twemoji", path, { weight: "700" })); - } else { - // fall back to SBIX, generated via https://github.com/matrix-org/twemoji-colr/tree/matthew/sbix - const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2")}')`; - document.fonts.add(new FontFace("Twemoji", path, {})); - document.fonts.add(new FontFace("Twemoji", path, { weight: "600" })); - document.fonts.add(new FontFace("Twemoji", path, { weight: "700" })); - } - // ...and if SBIX is not supported, the browser will fall back to one of the native fonts specified. + // no need, we ensure twemoji font is system } --- a/res/themes/light/css/_fonts.pcss +++ b/res/themes/light/css/_fonts.pcss @@ -16,8 +16,7 @@ font-weight: 400; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-Regular.woff2?v=3.18") format("woff2"), - url("$(res)/fonts/Inter/Inter-Regular.woff?v=3.18") format("woff"); + src: local("Inter Regular"); } @font-face { font-family: "Inter"; @@ -25,8 +24,7 @@ font-weight: 400; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-Italic.woff2?v=3.18") format("woff2"), - url("$(res)/fonts/Inter/Inter-Italic.woff?v=3.18") format("woff"); + src: local("Inter Italic"); } @font-face { @@ -35,8 +33,7 @@ font-weight: 500; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-Medium.woff2?v=3.18") format("woff2"), - url("$(res)/fonts/Inter/Inter-Medium.woff?v=3.18") format("woff"); + src: local("Inter Medium"); } @font-face { font-family: "Inter"; @@ -44,8 +41,7 @@ font-weight: 500; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-MediumItalic.woff2?v=3.18") format("woff2"), - url("$(res)/fonts/Inter/Inter-MediumItalic.woff?v=3.18") format("woff"); + src: local("Inter Medium Italic"); } @font-face { @@ -54,8 +50,7 @@ font-weight: 600; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-SemiBold.woff2?v=3.18") format("woff2"), - url("$(res)/fonts/Inter/Inter-SemiBold.woff?v=3.18") format("woff"); + src: local("Inter SemiBold"); } @font-face { font-family: "Inter"; @@ -63,8 +58,7 @@ font-weight: 600; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff2?v=3.18") format("woff2"), - url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff?v=3.18") format("woff"); + src: local("Inter SemiBold Italic"); } @font-face { @@ -73,8 +67,7 @@ font-weight: 700; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-Bold.woff2?v=3.18") format("woff2"), - url("$(res)/fonts/Inter/Inter-Bold.woff?v=3.18") format("woff"); + src: local("Inter Bold"); } @font-face { font-family: "Inter"; @@ -82,8 +75,7 @@ font-weight: 700; font-display: swap; unicode-range: $inter-unicode-range; - src: url("$(res)/fonts/Inter/Inter-BoldItalic.woff2?v=3.18") format("woff2"), - url("$(res)/fonts/Inter/Inter-BoldItalic.woff?v=3.18") format("woff"); + src: local("Inter Bold Italic"); } /* latin-ext */ @@ -91,8 +83,7 @@ font-family: "Inconsolata"; font-style: normal; font-weight: 400; - src: local("Inconsolata Regular"), local("Inconsolata-Regular"), - url("$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2") format("woff2"); + src: local("Inconsolata Regular"), local("Inconsolata-Regular"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @@ -101,8 +92,7 @@ font-style: normal; font-weight: 400; font-display: swap; - src: local("Inconsolata Regular"), local("Inconsolata-Regular"), - url("$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2") format("woff2"); + src: local("Inconsolata Regular"), local("Inconsolata-Regular"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @@ -112,8 +102,7 @@ font-style: normal; font-weight: 700; font-display: swap; - src: local("Inconsolata Bold"), local("Inconsolata-Bold"), - url("$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2") format("woff2"); + src: local("Inconsolata Bold"), local("Inconsolata-Bold"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @@ -122,8 +111,7 @@ font-style: normal; font-weight: 700; font-display: swap; - src: local("Inconsolata Bold"), local("Inconsolata-Bold"), - url("$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2") format("woff2"); + src: local("Inconsolata Bold"), local("Inconsolata-Bold"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } --- a/res/themes/legacy-light/css/_fonts.pcss +++ b/res/themes/legacy-light/css/_fonts.pcss @@ -23,17 +23,17 @@ font-family: "Nunito"; font-style: normal; font-weight: 400; - src: url("$(res)/fonts/Nunito/Nunito-Regular.ttf") format("truetype"); + src: local("Nunito Regular"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; - src: url("$(res)/fonts/Nunito/Nunito-SemiBold.ttf") format("truetype"); + src: local("Nunito SemiBold"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; - src: url("$(res)/fonts/Nunito/Nunito-Bold.ttf") format("truetype"); + src: local("Nunito Bold"); } --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -13,10 +13,10 @@ /* Noto Color Emoji contains digits, in fixed-width, therefore causing digits in flowed text to stand out. TODO: Consider putting all emoji fonts to the end rather than the front. */ -$font-family: "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "STIXGeneral", +$font-family: "Inter", "Twemoji", "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "STIXGeneral", "Noto Color Emoji"; -$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, +$monospace-font-family: "Inconsolata", "Twemoji", "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "STIXGeneral", "Noto Color Emoji"; /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */