PLANNING CONSULTATION DEADLINE Midnight on Monday 8 August 2022

See application details and impacts here !

Help:Setting fonts globally

From Miah Wiki
Jump to navigation Jump to search
All paths are relative to the MediaWiki deployment directory.

Font families[edit source]

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

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[edit source]

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[edit source]

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[edit source]

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

Transfonter example.png

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!

Notes[edit source]

  1. This is the file where all elements CSS classes can be redefined. Supports SCSS syntax.
  2. Other formats should also work, but only the truetype fonts were tested.