FANDOM



The minor changes made to Moviepedia are just a simple example, but in case you're interested in learning:

Adding a custom font to your wiki

  1. Navigate to http://www.google.com/fonts and find a font you like. (The example font I've selected is "Tulpen One")
  2. To the right of the font's text example, you will see two icons next to the "Remove from Collection" button. You'll need to click the "Quick-use" icon, which looks like a box with a right-arrow in it. Gfreefonts quickuse icon 003
  3. Now scroll down the page to "3. Add this code to your website:" and click on the "@import" tab.
  4. Highlight and Copy the displayed text - which should look something like this:
    @import url(http://fonts.googleapis.com/css?family=Tulpen+One);
  5. Now navigate to the MediaWiki:Wikia.css page for your wiki (EXAMPLE: movies.wikia.com/wiki/MediaWiki:Wikia.css), and click "Edit."
  6. Being careful not to interfere with any existing code, paste the copied text onto a blank line, and make the following important changes: Replace the parentheses ( ) with quotes " " and remove "url" so that the line of code now looks like this:
    @import "http://fonts.googleapis.com/css?family=Tulpen+One";
  7. Make sure everything looks correct, and click "Publish" to save your edit.

Sometimes the system will take a short while to process this change, but you should now be able to display your custom font by using the standard font-family: variable as seen here:

Code Result
<div style="font-family:Cursive;">Example Text, "Cursive" font</div>
Example Text, "Cursive" font
<font style="font-family:Impact;">Example Text, "Impact" font</font>
Example Text, "Impact" font
<span style="font-family:Consolas;">Example Text, "Consolas" font</span>
Example Text, "Consolas" font

Changing the global navigation font on your wiki

One of the tricks your new custom font can be used for is customizing your wiki's global (top) navigation menu. The easiest way to do this is to enter this simple piece of code to your wiki's MediaWiki:Wikia.css page:

.WikiHeader {
    font-family: 'Tulpen One';
}

This is the same .css page referred to in the custom font section above, again using "Tulpen One" as the example custom font. In some cases (with Tulpen One, for example) it may be necessary to change the font size, as different fonts may appear smaller or larger than the default Wikia font. In order to do this, the following three sets of code are needed for the three menu levels:

Level 1

.WikiHeader > nav li {
    font-size: 36px;
}

Level 2

.WikiHeader > nav .subnav-2 li {
    font-size: 24px;
}

Level 3

.WikiHeader > nav .subnav-3 li a {
    font-size: 24px;
}
Often times the font will not need to be re-sized, but if it does, this is the adjustment.

Have fun, and don't be afraid to get creative!


Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.