Custom fonts

Custom fonts can help your wiki look unique, and have a style closer to the wiki's topic. The most common way is using Google Fonts's library of over 1,000 free to use fonts.

Google Fonts

First, go to Google Fonts and find a font you like. You could also search something like "what font does [name] use" and see if Google Fonts has it (see below if it does not). Once you find a font, go to its page. You should see a "select this style" button next to the font demonstration.

Clicking it should pop up a sidebar with installation instructions. Under "Use on the web" select the "@import" button. You should see code that looks something like:

<style>
@import url('https://fonts.googleapis.com/css2?family=__FONT NAME__&display=swap');
</style>

Remove the two "style" tags so you just are left with the "@import":

@import url('https://fonts.googleapis.com/css2?family=__FONT NAME__&display=swap');

Next, go to MediaWiki:Common.css on your wiki and paste the code at the top of the page. You now can use that font where you want!

Make sure to remember the "font-family" line from the "CSS rules to specify families" section when you assign fonts.

font-family: '__FONT NAME__', font-type;

Without Google Fonts

This is an alternative method to apply custom fonts without the use of Google Fonts. Download the font you want. Most font files come in .ttf, .otf, .woff, and .woff2. The preferred is .woff2 files as they are "designed" for online use, so convert any other types if needed.

Next, contact Fandom support and ask them to enable ".woff2" font files on your wiki. Once enabled, upload the font to your wiki.

After that, add your font to MediaWiki:Common.css like this:

@font-face {
	font-family: __FONT NAME__; /* Define the font name here to be used later */
	src: url('__FONT URL__') format('woff2'); /* Define where the font can be downloaded */
}

Replace __FONT URL__ in the src property with the full URL to the font file, as reported by its file page. It should look like https://static.wikia.nocookie.net/wiki-name/images/7/78/name-of-font.woff2 . The font-family property does not require the extension, as it is declaring the name of the variable to be used later.

NOTE: The raw and full URL should be used rather than /wiki/Special:FilePath, because the latter will mean the font file cannot be cached by the web browser. That will make the wiki much less responsive.

Assign fonts

For anything you want the font to be used on, apply the code you saved from the "CSS rules to specify families" below the at-rule.

⠀Article headings

.page-content :is(h2, h3, h4, h5, h6) .mw-headline {
	font-family: __FONT NAME__;
}

Wiki and article title

.fandom-community-header__community-name, h1#firstHeading {
	font-family: __FONT NAME__;
}