Fonts

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <span style="font-family:Georgia;">Text Goes Here</span>

***Note: Most of these fonts are registered on wikis if they've been uploaded via the MediaWiki CSS. This means that some fonts won't work everywhere. If the code doesn't work, please contact your local Administrators.***

## Introduction

There are many fonts in that people can use to code. They only show if they are installed on the viewer's device, however. This tutorial shows you how to insert a font and which fonts are available on this wiki. ***Please note that importing many fonts on a wiki can cause performance issues, it's best practice to limit to 3-5 fonts for a typical wiki.***

These fonts are Google fonts, as Microsoft fonts are already on the wiki.

## Using Fonts

To change a text font, use this code:

```
<span style="font-family: Caveat Brush;">Text Goes Here</span>

```

Which results in: Text Goes Here

## Font List

A list of fonts that are HTML and CSS compatible can be found over here.

### Our Wiki's Fonts

If the font does not show by default, then you or the wiki's admin should go into the wiki's CSS coding ( it is accessible through the wiki **Admin Dashboard**) and add the font to the font imports. To do so, type:

```
@import url('https://fonts.googleapis.com/css?family=insert+font+name+here%7Cinsert+font+name+here');

```

You can select fonts in Google fonts. And make sure to only use @import!

Here is a list of fonts that this wiki has:

* Abril Fatface
* Agency FB
* Algerian
* Alata
* Alegreya Sans SC
* Annie Use Your Telescope
* Bad Script
* Bellota
* Bauhaus 93
* Broadway
* Caveat
* Caveat Brush
* Cedarville Cursive
* Cherry Cream Soda
* Chewy
* Cinzel
* Cinzel Decorative
* Coiny
* Coming Soon
* Concert One
* Courgette
* Crafty Girls
* Comfortaa
* Damion
* Dancing Script
* Darker Grotesque
* Dekko
* Delius
* Didact Gothic
* Dosis
* Fredoka One
* Gloria Hallelujah
* Gochi HandRoyal
* Great Vibes
* Indie Flower
* Itim
* Josefin Sans
* Jua
* Just Me Again Down Here
* Jokerman
* Kalam
* Kaushan Script
* LacquerRoyal
* Lexend Peta
* Lexend Zetta
* Long Cang
* Luckiest Guy
* Lucida Handwriting
* Ma Shan Zheng
* Mali
* Merienda
* Montserrat
* Ms Pgothic
* Nanum Pen Script
* Neucha
* Nunito
* OCR A Extended
* OCR BT
* Pacifico
* Pangolin
* Patrick Hand
* Patrick Hand SC
* Permanent Marker
* Press Start 2P
* Product Sans
* Quicksand
* Rampart One
* Reenie Beanie
* Rock Salt
* Rubik (Our Wiki's main font)
* Ravie
* Rum Raisin
* Sacramento
* San Francisco
* Satisfy
* Schoolbell
* Sedgwick Ave Display
* SpectralRoyal Never Give Up
* Shadows Into Light
* Short Stack
* Single Day
* Sniglet
* Segoe Print
* Segoe Script
* Sue Ellen Francisco
* Tajawal
* Tempus Sans ITC
* Ubuntu Condensed
* Unkempt
* Verdana
* VT323
* Work Sans
* Yellowtail
* Zen Dots

### Common Fonts

*These are fonts commonly installed on computers and/or wikis. Feel free to add to this list:*

* Arial
* Arial Black
* Arial Narrow
* Comic Sans MS
* Comfortaa
* Copperplate
* Courier
* Courier New
* Georgia
* Impact
* Helvetica
* Lobster (does not work in editors that have not imported the font)
* Pacifico (does not work in editors that have not imported the font)
* Papyrus
* Times New Roman
* Noteworthy

### Generic Fonts

*These are groups of fonts. You can simply call for a generic font and it will use a similar font to the one that shows up on your computer.*

* Serif (similar to Times New Roman)
* Sans-Serif (similar to Helvetica)
* Cursive
* Fantasy
* Monospace

Generic fonts are often used as backup fonts, in case the specific font is not imported in the wiki.

```
<span style="font-family: Caveat Brush, cursive;">Text Goes Here</span>

```

This means that if the font "Caveat Brush" does not exist on that wiki, it will use cursive instead.

***Fonts can also be paired with text color, text decoration, and more text-related attributes. Instead of `span style`, you can also use `div style` to change the font to whatever you want.***