Community Central
Community Central

Hello there.

This is a quick guide on how to import default fonts for your wiki (one that is applied wiki-wide). There are three CSS options to accomplish this.

Head to MediaWiki:Common.css on your wiki and pick one of the following codes:

1. To apply a common font.

Use this code for the widest allowed scope:

#WikiaPage {
  font-family: "<font name>";
}

This affects just about every single Wikia element whitelisted for customization.

For some fonts, you will have to enter "serif", "sans-serif", "monospace", "cursive" or something similar behind a comma behind the font name. The semicolon has to be at the end of it all. If you want to customize the headers, use h1, h2, h3, h4, h5, .mw-headline. For customizations specific to the article and not things like the title, edit buttons and wikia rail; use things like #WikiaMainContent or * article.

However, an important detail is that it is not allowed to use the body selector (with or without * and a space before it) as this would affect elements that must remain intact per the Customization Policy.

2. To import from Google Fonts.

Head to Google Fonts and select one or more fonts (by clicking the "+"). Then open a tab at the bottom of the window and click "@import". There, it'll show an "@import" code to copy-paste to the top of Common.css. You should not copy the "<style>" tags unlike what Google Fonts tells you to do; just copy the @import.

After importing the font, use the code listed at the first method.

3. Directly uploading the font.

In order to do this, you must request Staff through Special:Contact/general to enable ".tff", ".otf", ".eot", ".woff" and ".woff2" uploads for your wiki.

After that, upload the font. Then, inspect the link listed on the file page and copy the url listed at the newly formed tab at the right (or just right-click the link and copy its adress).

Go to Common.css and write the following:

@font-face {
   font-family: '<a name you will give the font. Refer to the font using said name.>';
   src: url('<copied url>');
}

Then follow Step 1 and insert the name you gave the font. It is also possible to link a non-FANDOM website in the @font-face rule (bypassing the need for request, download and upload).

If another wiki already has the font in question uploaded, inspect the link on the file page on said wiki and use that URL instead (e.g. using the Undertale Wiki's @font-face rule for the Determination font. Make sure you have permission to use the rule/font).

In addition, you can also use MediaWiki:Wikia.css or MediaWiki:Monobook.css if you only want to affect one skin.

If I made a mistake here, please let me know and I'll fix it; it is not my intention to misinform others.

I hope this blog was very helpful!