Help:Fonts

From Meta Wiki
Jump to: navigation, search

Several wikis use different fonts for different purposes. Some of the more common fonts are the RuneScape fonts, the 'IBM Plex Sans' font, and the 'PT Serif' fonts. Other fonts can be installed on any wiki through the global Less files, located at MediaWiki:Common.less.

When uploading a font to the wiki, make sure reuploading this font is legal. Not all fonts are free to redistribute, and some fonts have strict limitations to their reuse. The most common fonts that allow redistribution are licensed under the SIL Open Font License (OFL). If a font is licensed, make sure the uploaded file includes the proper license notice on the file page.

Installing a new font[edit source]

If you want to install a new font on the wiki, simply look up the font's woff variant on-line. A good place to look for fonts that can be easily downloaded is https://www.fontsquirrel.com/. This site provides a web font package for most fonts that allow redistributing. Simply look up the font you want, and download the woff files for that font. Some fonts only provide a single font file, and others provide multiple. If there are multiple variants, you typically only need the regular, bold, italic, and bold-italic variants. Any variants such as "light" or "thin" are not typically useful for use on the web.

Upload the font files onto the wiki and add the proper license notice to the file page. Then add the following to your wiki's MediaWiki:Common.less (or fonts sub-file like MediaWiki:Common.less/fonts.less):

 @font-face {
     font-family: 'MyFont';
     font-weight: normal;
     font-style: normal;
     font-display: swap;
     src: url('filepath://MyFont-Regular.woff') format('woff');
 }
 @font-face {
     font-family: 'MyFont';
     font-weight: normal;
     font-style: italic;
     font-display: swap;
     src: url('filepath://MyFont-Italic.woff') format('woff');
 }
 @font-face {
     font-family: 'MyFont';
     font-weight: bold;
     font-style: normal;
     font-display: swap;
     src: url('filepath://MyFont-Bold.woff') format('woff');
 }
 @font-face {
     font-family: 'MyFont';
     font-weight: bold;
     font-style: italic;
     font-display: swap;
     src: url('filepath://MyFont-BoldItalic.woff') format('woff');
 }

Of course, replace MyFont in that example with the actual name of the uploaded font, and replace the file paths with the respective file names of the uploaded font files. Omit the additional styles for bold and italic versions, where those versions are not available.

For fonts that are installed in the global CSS, please make sure the fonts are permanently protected, since these files are loaded onto every single page on the wiki.

Converting an existing font[edit source]

If a font allows modification, you can also download a font file of another filetype, such as ttf and convert it using FontSquirrel. Please do make sure this is allowed, however. Fonts licensed under OFL do allow this conversion only if the name of the font is changed. In these cases, please ensure the name of the webfont is different from the original, and do add the OFL license notice to the font file page.