PLANNING CONSULTATION DEADLINE Midnight on Monday 8 August 2022
See application details and impacts here !
Help:Setting fonts globally
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:
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!