Help:Setting fonts globally

All paths are relative to the MediaWiki deployment directory.

Font families

Fonts for the normal text and headings can be set separately for the whole Chameleon skin in the configuration file:

sudo nano extensions/wikivisor/LocalSettings.php

Find configuration variables:

$egChameleonExternalStyleVariables = [
       ...
       'font-family-base' => 'Lato, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
       'headings-font-family' => '"Montserrat Alternates", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
       ...
];

Specify font faces names in the order of their priority. The first font face in the list will be used if possible. If the font face name contains space it must be quoted.

Font faces

Font faces are instructions about webfonts paths and parameters. They can be set in the configuration file:

sudo nano extensions/wikivisor/skins/chameleon/custom.scss

For example:

@font-face {
   font-family: 'Lato';
   src: url('extensions/wikivisor/webfonts/Lato/Lato-Italic.eot');
   src: url('extensions/wikivisor/webfonts/Lato/Lato-Italic.eot?#iefix') format('embedded-opentype'),
       url('extensions/wikivisor/webfonts/Lato/Lato-Italic.woff2') format('woff2'),
       url('extensions/wikivisor/webfonts/Lato/Lato-Italic.woff') format('woff'),
       url('extensions/wikivisor/webfonts/Lato/Lato-Italic.ttf') format('truetype'),
       url('extensions/wikivisor/webfonts/Lato/Lato-Italic.svg#Lato-Italic') format('svg');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

After changing this file, run the following command to drop the cache and make changes visible:

sudo touch LocalSettings.php

Already opened pages may need a hard reload (Firefox: Ctrl+F5).

Webfonts

Currently, there are font faces set for the following webfonts:

• Arvo
• Bellefair
• Dosis
• Lato (used for normal text)
• Montserrat Alternates (used for headings)
• Playfair Display

One can play with fonts right in the browser using developer tools (F12).

To navigate to the current webfonts home directory do:

cd extensions/wikivisor/webfonts

The path can be anything, just adapt the URL in the font-face rule. Feel free to remove unnecessary font-faces to improve loading speed.

The webfonts and the respective font-face rules can be downloaded from the external resources like Google fonts.

Fonts conversion for cross-browser optimization

One can create a set of webfonts alongwith font-face rules by converting available TTF (truetype fonts) on a site like transfonter.org:

Copy the download link URL and download the archive into the font directory:

sudo wget http://copied/download/URL

Extract the archive contents to the separate directory named after the font name.

sudo unzip downloaded.fonts.archive.zip

Copy rules from the stylesheet.css, paste into extensions/wikivisor/skins/chameleon/custom.scss and adjust paths.

Done!