Using Google fonts under MediaWiki
Did you know that you can use Google fonts under MediaWiki? It’s not too hard, just do the following:
- Go to https://fonts.google.com and choose the typeface of your choice.
- Choose the Select option next to the fonts. I went with the most common styles (regular, italic, bold, bold italic).
- Click on the View selected families icon on the top right.
- Choose the @import radio button and copy the import line between the
<style>…</style>tags. - Go to the Appearance tab in your preferences page.
- Click on the Custom CSS link, either next to the skin you want to style, or below “Shared CSS/JavaScript for all skins”.
- Paste the
@importline you copied in step 4 into the editor. - Enter
body { font-family: <FONT NAME HERE>; }, replacing <FONT NAME HERE> with the name of the font you chose, i.e. Lato. - Choose the Publish changes option. If you don’t see the changes, refresh your browser’s cache (click for instructions).
- Enjoy!
Here’s an example of the resulting CSS:
| Special:MyPage/common.css |
|---|
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body { font-family: Lato; }
|
By the way, it works on Wikipedia, too.