Adding Google Fonts to CSS Themes

GirlCalledBlu

And for my last trick of the night...!

Google Fonts are fabulous for font choices, and since they are web-based, they can easily be added to a wiki theme, and then used throughout the wiki to break away from the standard Serif or Sans-Serif fonts (hello, Verdana, my old friend).

First, go hog-wild on the Google Font database, and choose a font: https://fonts.google.com/

Let's go wacky, and decide to use Bungee Outline (which is a fun font, but not one I would personally use for headers).

Before you can use the font in your theme, you need to import it using @import.

Open the raw code for your theme (in Wikidot, you find this under 'Themes' in the Appearance & Behavior section, and then in the 'Custom' themes).

You might already have some features imported, either by choice or because of the theme base you are using. Regardless, you will place this import at the top of your code using this code snippet:

@import 'https://fonts.googleapis.com/css?family=Bungee+Outline';

This will add the font into your theme. Now, you can use the 'font-family' code to use this font anywhere in your theme. For example, let's say we're going to use Bungee Outline for our H1 (Header 1) font:

h1{
    font-family: 'Bungee Outline,' cursive;
    font-size: 175%;
    font-weight: normal;
    text-decoration: none;
}

I always add another font variable because there's a chance some people have disabled web-based fonts. If they have, the header will default to 'cursive.'

Bobotron

Can you do this with a normal mediawiki installation?

surreality

@Bobotron Yes! Works the same way.

You can use directly installed webfonts as well, but you do have to be able to directly install them/etc. (Myfonts.com has some good and reasonably priced ones, and a few free ones -- you can build an installer from there that'll spit out the css for you, which just goes at the top of your MediaWiki:Common.css page, anc once you upload your fonts to the server as directed it'll work fine.)

Bobotron

@surreality
Neat. I have some fonts I like that I want to use for Houses of the Blood, and it's annoying to have the sizing go all crazy when a player's computer doesn't have the font.

Quibbler

I have been using the hell out of this.

Thenomain

I'm just going to leave this here.

https://www.fontsquirrel.com

Enjoy this to the fullest.

Misadventure

@Thenomain It has no Snipple, it has failed me.

alt text

Thenomain

@Misadventure

You do the following in order:

Bask in the warmth that you are a fine purveyor of Chank fonts, because Chank is awesome. I have a flip lighter with his older "robot" logo on it.
Go to the Snipple page and download it. It's free! Hurrah!
Check Chank's free font license, because you're checking these things, right?
Notice the following text:

You may use this font for your own personal website or communications, or for personal design work you might do for a friend, such as a birthday party invite, an indie band cd, a personal website or a personal scrapbooking project.

Bask some more. Chank has been a very copyright-conscious designer since he's started, decades ago.
Go to the FontSquirrel web-font conversion page.
Install the converted web font into a directory your Mediawiki installation can reach, set up the CSS to reach it, and use it with impunity.
Do some basking for FontSquirrel, too. Turn off your ad-blocker for them. They're not even using trackers. Huh!

Misadventure

And then love and adoration of my players as they read their wiki in Snipple?

Victory.

Bobotron

This post is deleted!