diff --git a/res/css/_common.scss b/res/css/_common.scss index 3fd059acab..1e1a1f82e4 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -34,6 +34,7 @@ body { pre, code { font-family: $monospace-font-family; + font-size: 100% ! important; } .error, .warning { diff --git a/res/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2 b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2 similarity index 100% rename from res/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2 rename to res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2 diff --git a/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 new file mode 100644 index 0000000000..db8ee47729 Binary files /dev/null and b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 differ diff --git a/res/themes/light/css/_fonts.scss b/res/themes/light/css/_fonts.scss index ffd3dffee1..1bc9b5a4a3 100644 --- a/res/themes/light/css/_fonts.scss +++ b/res/themes/light/css/_fonts.scss @@ -33,23 +33,40 @@ src: url('$(res)/fonts/Nunito/Nunito-Bold.ttf') format('truetype'); } -/* - * Fira Mono - * Used for monospace copy, i.e. code - */ - +/* latin-ext */ @font-face { - font-family: 'Fira Mono'; - src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); + font-family: 'Inconsolata'; + font-style: normal; font-weight: 400; - font-style: normal; + src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url('$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2') format('woff2'); + 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 */ @font-face { - font-family: 'Fira Mono'; - src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); - font-weight: 700; + font-family: 'Inconsolata'; 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'); + 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; +} +/* latin-ext */ +@font-face { + font-family: 'Inconsolata'; + 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'); + 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 */ +@font-face { + font-family: 'Inconsolata'; + 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'); + 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 COLR/CPAL version of Twemoji used for consistent cross-browser emoji @@ -57,7 +74,11 @@ * using the fix from https://github.com/mozilla/twemoji-colr/issues/50 to * work on macOS */ +/* +// except we now load it dynamically via FontManager to handle browsers +// which can't render COLR/CPAL still @font-face { font-family: "Twemoji Mozilla"; src: url('$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2') format('woff2'); } +*/ \ No newline at end of file diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index d8f36910a2..afac110133 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -5,11 +5,11 @@ Arial empirically gets it right, hence prioritising Arial here. */ /* We fall through to Twemoji for emoji rather than falling through to native Emoji fonts (if any) to ensure cross-browser consistency */ -$font-family: Nunito, 'Twemoji Mozilla', Arial, Helvetica, Sans-Serif; +$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif; // XXX: In theory this should be Fira, but it's a bit ugly. // TODO: make it consistent cross-browser -$monospace-font-family: Consolas, 'Liberation Mono', Courier, 'Twemoji Mozilla', monospace; +$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Noto Color Emoji', Courier, monospace; // unified palette // try to use these colors when possible diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 0ad2f72cfc..7a5c6e3006 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -24,6 +24,7 @@ import { DragDropContext } from 'react-beautiful-dnd'; import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard'; import PageTypes from '../../PageTypes'; import CallMediaHandler from '../../CallMediaHandler'; +import { fixupColorFonts } from '../../utils/FontManager'; import sdk from '../../index'; import dis from '../../dispatcher'; import sessionStore from '../../stores/SessionStore'; @@ -118,6 +119,8 @@ const LoggedInView = React.createClass({ this._matrixClient.on("accountData", this.onAccountData); this._matrixClient.on("sync", this.onSync); this._matrixClient.on("RoomState.events", this.onRoomStateEvents); + + fixupColorFonts(); }, componentDidUpdate(prevProps) { diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js new file mode 100644 index 0000000000..58a0c0e838 --- /dev/null +++ b/src/utils/FontManager.js @@ -0,0 +1,78 @@ +/* +Copyright 2019 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +/* + * Based on... + * ChromaCheck 1.16 + * author Roel Nieskens, https://pixelambacht.nl + * MIT license + */ + +let colrFontSupported = undefined; + +async function isColrFontSupported() { + if (colrFontSupported !== undefined) { + return colrFontSupported; + } + + try { + let canvas = document.createElement('canvas'); + let context = canvas.getContext('2d'); + let img = new Image(); + let fontCOLR = 'd09GRgABAAAAAAKAAAwAAAAAAowAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDT0xSAAACVAAAABYAAAAYAAIAJUNQQUwAAAJsAAAAEgAAABLJAAAQT1MvMgAAAYAAAAA6AAAAYBfxJ0pjbWFwAAABxAAAACcAAAAsAAzpM2dseWYAAAH0AAAAGgAAABoNIh0kaGVhZAAAARwAAAAvAAAANgxLumdoaGVhAAABTAAAABUAAAAkCAEEAmhtdHgAAAG8AAAABgAAAAYEAAAAbG9jYQAAAewAAAAGAAAABgANAABtYXhwAAABZAAAABsAAAAgAg4AHW5hbWUAAAIQAAAAOAAAAD4C5wsecG9zdAAAAkgAAAAMAAAAIAADAAB4AWNgZGAAYQ5+qdB4fpuvDNIsDCBwaQGTAIi+VlscBaJZGMDiHAxMIAoAtjIF/QB4AWNgZGBgYQACOAkUQQWMAAGRABAAAAB4AWNgZGBgYGJgAdMMUJILJMQgAWICAAH3AC4AeAFjYGFhYJzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgFkDgKQMBw4CXDSwYWEBdIYgAFBgYA/8sIdAAABAAAAAAAAAB4AWNgYGBkYAZiBgYeBhYGBSDNAoRA/kuG//8hpDgjWJ4BAFVMBiYAAAAAAAANAAAAAQAAAAAEAAQAAAMAABEhESEEAPwABAD8AAAAeAEtxgUNgAAAAMHHIQTShTlOAty9/4bf7AARCwlBNhBw4L/43qXjYGUmf19TMuLcj/BJL3XfBg54AWNgZsALAAB9AAR4AWNgYGAEYj4gFgGygGwICQACOwAoAAAAAAABAAEAAQAAAA4AAAAAyP8AAA=='; + let svg = '' + + ''+ + '' + + '' + // COLR + '' + + ''; + canvas.width = 20; + canvas.height = 100; + + img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg); + + // FIXME wait for safari load our colr font + const wait = ms => new Promise((r, j)=>setTimeout(r, ms)) + await wait(500); + + context.drawImage(img, 0, 0); + colrFontSupported = (context.getImageData(10, 10, 1, 1).data[0] === 200); + } + catch (e) { + console.error("Couldn't load colr font", e); + colrFontSupported = false; + } + return colrFontSupported; +} + +export async function fixupColorFonts() { + if (colrFontSupported !== undefined) { + return; + } + + // we programatically add the right fontface. + let font; + if (await isColrFontSupported()) { + font = new FontFace("Twemoji", "url('../../fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2')", {}); + } + else { + font = new FontFace("Twemoji", "url('../../fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2')", {}); + } + document.fonts.add(font); +} +