The use of a non-default font is a great way to individualize your community and, with Google Fonts, using a custom font is quick and easy.
Step by step[]
- Browse the fonts at https://fonts.google.com.
- When you've chosen a font, click on it. This will take you to a page for that font. Near the top should be a button reading "Get font". Click that button. This will make you go to a page with the download and other things..
- On the "Checkout" page, click "Embed code" then click "@IMPORT". This will display a snippet of code that includes the syntax,
@import url('https://fonts.googleapis.com/css2?family=Font+Name');whereFont+Namewill be the name of the font you chose, with spaces in the name replaced with the plus sign. There may be some other text after the font name, that's okay. - Ignore the
<style>and</style>lines, but copy the@importline of code and paste it at the top of your community's CSS page. - After the cache updates, which can take up to several minutes, your new font will be ready to use.
Choosing multiple fonts[]
If you decide to import multiple Google Fonts, you can either repeat the steps above for each font or follow the steps explained below.
While browsing fonts, click the “+” button for each font you want to use. After you're done choosing, click the “Families Selected” bar at the bottom of the window to open the “Your Collection” module. If there is a font you decide that you don't want to use, you can delete it by clicking the “-” next to its name at the top of the module.
Once you're happy with your selection of fonts, simply follow the instructions for steps 3 and 4 listed above.
See also[]
Further help and feedback[]
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article