diff --git a/res/css/_common.scss b/res/css/_common.scss index 3fd059acab..973103899d 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/Fira_Mono/FiraMono-Bold.ttf b/res/fonts/Fira_Mono/FiraMono-Bold.ttf deleted file mode 100755 index 4b8b1cfbcb..0000000000 Binary files a/res/fonts/Fira_Mono/FiraMono-Bold.ttf and /dev/null differ diff --git a/res/fonts/Fira_Mono/FiraMono-Regular.ttf b/res/fonts/Fira_Mono/FiraMono-Regular.ttf deleted file mode 100755 index 5238c09eda..0000000000 Binary files a/res/fonts/Fira_Mono/FiraMono-Regular.ttf and /dev/null differ diff --git a/res/fonts/Fira_Mono/OFL.txt b/res/fonts/Fira_Mono/OFL.txt deleted file mode 100755 index ba853c049e..0000000000 --- a/res/fonts/Fira_Mono/OFL.txt +++ /dev/null @@ -1,92 +0,0 @@ -Copyright (c) 2012-2013, The Mozilla Corporation and Telefonica S.A. -This Font Software is licensed under the SIL Open Font License, Version 1.1. -This license is copied below, and is also available with a FAQ at: -http://scripts.sil.org/OFL - - ------------------------------------------------------------ -SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 ------------------------------------------------------------ - -PREAMBLE -The goals of the Open Font License (OFL) are to stimulate worldwide -development of collaborative font projects, to support the font creation -efforts of academic and linguistic communities, and to provide a free and -open framework in which fonts may be shared and improved in partnership -with others. - -The OFL allows the licensed fonts to be used, studied, modified and -redistributed freely as long as they are not sold by themselves. The -fonts, including any derivative works, can be bundled, embedded, -redistributed and/or sold with any software provided that any reserved -names are not used by derivative works. The fonts and derivatives, -however, cannot be released under any other type of license. The -requirement for fonts to remain under this license does not apply -to any document created using the fonts or their derivatives. - -DEFINITIONS -"Font Software" refers to the set of files released by the Copyright -Holder(s) under this license and clearly marked as such. This may -include source files, build scripts and documentation. - -"Reserved Font Name" refers to any names specified as such after the -copyright statement(s). - -"Original Version" refers to the collection of Font Software components as -distributed by the Copyright Holder(s). - -"Modified Version" refers to any derivative made by adding to, deleting, -or substituting -- in part or in whole -- any of the components of the -Original Version, by changing formats or by porting the Font Software to a -new environment. - -"Author" refers to any designer, engineer, programmer, technical -writer or other person who contributed to the Font Software. - -PERMISSION & CONDITIONS -Permission is hereby granted, free of charge, to any person obtaining -a copy of the Font Software, to use, study, copy, merge, embed, modify, -redistribute, and sell modified and unmodified copies of the Font -Software, subject to the following conditions: - -1) Neither the Font Software nor any of its individual components, -in Original or Modified Versions, may be sold by itself. - -2) Original or Modified Versions of the Font Software may be bundled, -redistributed and/or sold with any software, provided that each copy -contains the above copyright notice and this license. These can be -included either as stand-alone text files, human-readable headers or -in the appropriate machine-readable metadata fields within text or -binary files as long as those fields can be easily viewed by the user. - -3) No Modified Version of the Font Software may use the Reserved Font -Name(s) unless explicit written permission is granted by the corresponding -Copyright Holder. This restriction only applies to the primary font name as -presented to the users. - -4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font -Software shall not be used to promote, endorse or advertise any -Modified Version, except to acknowledge the contribution(s) of the -Copyright Holder(s) and the Author(s) or with their explicit written -permission. - -5) The Font Software, modified or unmodified, in part or in whole, -must be distributed entirely under this license, and must not be -distributed under any other license. The requirement for fonts to -remain under this license does not apply to any document created -using the Font Software. - -TERMINATION -This license becomes null and void if any of the above conditions are -not met. - -DISCLAIMER -THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT -OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE -COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL -DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM -OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2 b/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2 new file mode 100644 index 0000000000..880f06af78 Binary files /dev/null and b/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2 differ diff --git a/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2 b/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2 new file mode 100644 index 0000000000..9fe96559d1 Binary files /dev/null and b/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2 differ diff --git a/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2 b/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2 new file mode 100644 index 0000000000..cd79590d99 Binary files /dev/null and b/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2 differ diff --git a/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2 b/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2 new file mode 100644 index 0000000000..cf26d38db4 Binary files /dev/null and b/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2 differ 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..33ae8946a4 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -5,11 +5,9 @@ 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..a7d33401eb --- /dev/null +++ b/src/utils/FontManager.js @@ -0,0 +1,89 @@ +/* +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; + } + + // Firefox has supported COLR fonts since version 26 + // but doesn't support the check below with content blocking enabled. + if (navigator.userAgent.includes("Firefox")) { + return true; + } + + try { + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + const img = new Image(); + // eslint-disable-next-line + const fontCOLR = 'd09GRgABAAAAAAKAAAwAAAAAAowAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDT0xSAAACVAAAABYAAAAYAAIAJUNQQUwAAAJsAAAAEgAAABLJAAAQT1MvMgAAAYAAAAA6AAAAYBfxJ0pjbWFwAAABxAAAACcAAAAsAAzpM2dseWYAAAH0AAAAGgAAABoNIh0kaGVhZAAAARwAAAAvAAAANgxLumdoaGVhAAABTAAAABUAAAAkCAEEAmhtdHgAAAG8AAAABgAAAAYEAAAAbG9jYQAAAewAAAAGAAAABgANAABtYXhwAAABZAAAABsAAAAgAg4AHW5hbWUAAAIQAAAAOAAAAD4C5wsecG9zdAAAAkgAAAAMAAAAIAADAAB4AWNgZGAAYQ5+qdB4fpuvDNIsDCBwaQGTAIi+VlscBaJZGMDiHAxMIAoAtjIF/QB4AWNgZGBgYQACOAkUQQWMAAGRABAAAAB4AWNgZGBgYGJgAdMMUJILJMQgAWICAAH3AC4AeAFjYGFhYJzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgFkDgKQMBw4CXDSwYWEBdIYgAFBgYA/8sIdAAABAAAAAAAAAB4AWNgYGBkYAZiBgYeBhYGBSDNAoRA/kuG//8hpDgjWJ4BAFVMBiYAAAAAAAANAAAAAQAAAAAEAAQAAAMAABEhESEEAPwABAD8AAAAeAEtxgUNgAAAAMHHIQTShTlOAty9/4bf7AARCwlBNhBw4L/43qXjYGUmf19TMuLcj/BJL3XfBg54AWNgZsALAAB9AAR4AWNgYGAEYj4gFgGygGwICQACOwAoAAAAAAABAAEAAQAAAA4AAAAAyP8AAA=='; + const svg = ` + + + + + + `; + 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('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2")}')`, {}); + } else { + font = new FontFace("Twemoji", + `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2")}')`, {}); + } + document.fonts.add(font); +} +