MediaWiki skins use system fonts, which approach has many drawbacks besides benefiting low-bandwidth connections. It's hard to get a consistent layout (and look) for the same content on different platforms and the fonts are not the best available for legibility and language support. The industry standard these days is to use web-fonts to achieve a consistent and modern look. While keeping the existing platform-specific font stacks of the Minerva and Timeless skins (as a fallback for low-bandwidth connections), we can introduce more appealing, legible and consistent fonts to MediaWiki skins. This proposal aims to find a commonly accepted set of fonts for this purpose and to unify the font stacks of the skins, although the default font might be different for individual skins.
==== How to test these fonts ====
* Install a userstyle (download: [[ https://github.com/openstyles/stylus#Releases | addon ]], [[ https://userstyles.org/styles/179438/wikipedia-font-update | userstyle ]]), open DevTools then untick the fonts one at a time, starting at the bottom. The last one enabled will be the visible font, except for the platform-specific fonts that aren't available on your device (the default font, eg. Times New Roman will be used instead).
* Using the [[ https://www.mediawiki.org/wiki/User:Aron_Manning/Skin_themes | custom theme ]] which also resets the `font-size` in Timeless from 95% - 15.2px (typical) to the default 100% - 16px. For reference: Vector font-size is 87.5% - 14px.
* The Noto Serif and Lora fonts by downloading the [[ https://gerrit.wikimedia.org/r/570074 | patch ]] in skins/Timeless: `git review -d 570074`
* The Roboto (sans) font by downloading the [[ https://gerrit.wikimedia.org/r/570245 | patch ]] in skins/MonoBook: `git review -d 570245`
==== Current font declarations ====
===== Former declaration in core
Declaration in WikimediaUI: https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.less line 192
core.git [[ https://github.com/wikimedia/mediawiki/blob/master/resources/lib/ooui/wikimedia-ui-base.less | /resources/lib/ooui/wikimedia-ui-base.less ]]
```
// Font Families
@font-family-base: @font-family-sans;
@font-family-heading-main: @font-family-serif;
// To be deprecated
@font-family-sans: 'Helvetica Neue', 'Helvetica', 'Nimbus Sans L', 'Arial', 'Liberation Sans', sans-serif;
@font-family-sans--fallback: sans-serif;
// Provide better operating system-specific readability, see T175877
// `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576
@font-family-system-sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
@font-family-serif--fallback: serif;
// Provide better operating system-specific monospace stack, see T209915.
@font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
@font-family-monospace--fallback: monospace, monospace; // See T176636
```
===== Minerva skin
[[ https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/minerva.less/minerva.variables.less | /minerva.less/minerva.variables.less ]]
Replicates the declaration in core.
```
@fontFamilySans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
@font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
h1, h2, blockquote { font-family: @font-family-serif; }
@supports ( font: -apple-system-body ) { html { font: -apple-system-body; }
```
===== Timeless skin
[[ https://github.com/wikimedia/mediawiki-skins-Timeless/blob/master/resources/themes/wikimedia.less | /resources/themes/wikimedia.less ]]
```
@fonts: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
@fonts-secondary: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
@fonts-mono: 'Menlo', 'Consolas', 'Monaco', 'Noto Mono', 'Nimbus Mono L', monospace;
body, .toctitle h2 { fonts }
a, h1-h6, dt { secondary }
```
===== Vector skin
[[ https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/variables.less | /variables.less ]]
```
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
@font-family-sans: sans-serif; /* Arial on Windows */
body { sans }
print, mw-body h1, -content h1, -content h2 { serif }
```
Modern, MonoBook: `font-family: sans-serif;`
===== CologneBlue (inactive)
[[ https://github.com/wikimedia/mediawiki-skins-CologneBlue/blob/master/resources/screen.css | /resources/screen.css ]]
```
font-family: 'Verdana', 'Arial', sans-serif;
#sitetitle { font-family: 'Times', serif; }
```
==== Proposed generic font stack declaration ====
core.git [[ https://gerrit.wikimedia.org/r/c/mediawiki/core/+/570597/10/resources/src/mediawiki.less/wikimedia-ui-fonts.less | /resources/src/mediawiki.less/wikimedia-ui-fonts.less ]]
To import in skins: `@import 'wikimedia-ui-fonts'`
```
// Roboto: Android 4.0; Noto: old Android; Segoe: Windows; Lato: webfont; Liberation Sans: GNU+Linux; Helvetica: generic
@ff-system-sans: 'Roboto', 'Noto Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI Historic', 'Lato', 'Liberation Sans', 'Helvetica', sans-serif;
// Roboto: Android 4.0; Noto: old Android; Georgia: Windows; Linux Libertine, Liberation Serif, Nimbus Roman: GNU+Linux; Times: Windows
@ff-system-serif: 'Roboto Slab', 'Noto Serif', 'Georgia', 'Linux Libertine', 'Liberation Serif', 'Nimbus Roman', 'Times', serif;
// Consolas: Windows; Menlo, Monaco: Mac; Noto Mono: ?; Nimbus Mono L: GNU+Linux; Inconsolata: generic; Ubuntu Mono: GNU+Linux; Courier New: Windows
@ff-system-mono: 'Consolas', 'Menlo', 'Monaco', 'Noto Mono', 'Liberation Mono', 'Nimbus Mono L', 'Inconsolata', 'Ubuntu Mono', 'Courier New', monospace;
@ff-sans: @ff-system-sans;
@ff-serif: @ff-system-serif;
@ff-mono: 'Fira Code', 'Hack', 'Source Code Pro', @ff-system-mono;
```
==== Benefits of a common, unified system font stack ====
Skins aren't //required// to use the common declarations, however, using the font stack imported from core reduces redundancy.
Skins can add their preferred font to the front of the stack. If that's not available, the skin will fall back to the common stack that's maintained to support a wide variety of platforms.
When the maintainers of one skin add a specific font for a specific platform, that will benefit all the other skins using the common declaration.
Additionally, customizing monospaced fonts in skins is not a target, using a common stack for that purpose is the easiest solution.
==== Prior art
{T176964}
{T209562}
{T212293}
{T176636}
{T173228}
{T73240}
{T221043}
{T175877}