Changes: Help:How to import Google Fonts

Revision as of 20:59, 16 April 2021

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 list of styles. Select the one you want by clicking "select this style" to the right of it. This will cause a bar to appear on the right of the screen that reads "Selected family".
On the "Selected family" module, click "@IMPORT". This will display a snippet of code that includes the syntax, @import url('https://fonts.googleapis.com/css2?family=Font+Name'); where Font+Name will 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 @import line 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.

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

@@ Line 1: / Line 1: @@
-The use of a non-default font is a great way to individualize your community, and, with [https://www.google.com/fonts Google Fonts], using a custom font is quick and easy.
+{{TOCright}}The use of a non-default font is a great way to individualize your community, and, with [https://fonts.google.com Google Fonts], using a custom font is quick and easy.
-==Step by step==
+== Step by step ==
-. Browse the fonts at https://www.google.com/fonts
+# 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 list of styles. Select the one you want by clicking "select this style" to the right of it. This will cause a bar to appear on the right of the screen that reads "Selected family".
+# On the "Selected family" module, click "@IMPORT". This will display a snippet of code that includes the syntax, <code><nowiki>@import url('https://fonts.googleapis.com/css2?family=Font+Name');</nowiki></code> where <code>Font+Name</code> will 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 <code><nowiki><style></nowiki></code> and <code><nowiki></style></nowiki></code> lines, but copy the <code>@import</code> line of code and paste it at the '''top''' of your community's [[Help:Community CSS and JS|CSS]] page.
+# After the cache [[Help:Bypass your cache|updates]], which can take up to several minutes, your new font will be ready to use.
+== Choosing multiple fonts ==
-[[File:GoogleFontQuick-use.jpg|thumb|325px|The Quick-use button]]
-. When you've chosen a font, click the "Quick-use" button on the right (see screenshot).
-. On the following page, scroll down to the section named "Add this code to your website" and click the @import tab. This will display a single line of code that includes the syntax, <code><nowiki>@import url(http://fonts.googleapis.com/css?family=Font+Name);</nowiki></code> where <code>Font+Name</code> will be the name of the font you chose.
-. Copy that code and paste it to your community using [[Help:Community CSS and JS|custom CSS]]. This is usually in MediaWiki:Wikia.css.
-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 blue button on the right labeled "Add to Collection" for each font you want to use. After you're done choosing, click the Review button at the bottom-right corner of the window. On the Review screen, you can preview each font's appearance in more detail. If there is a font you decide that you don't want to use, you can delete it by clicking the X at the top-right corner of its preview box.
+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, click the Use button at the bottom-right corner of the window. On the Use screen, simply follow the instructions for steps 3 and 4 listed above.
+Once you're happy with your selection of fonts, simply follow the instructions for steps 3 and 4 listed above.
-==See also==
+== See also ==
-*[[Help:Community CSS and JS]]
+* [[Help:Community CSS and JS|Community CSS and JS]]
-*[[Help:Customization policy]]
+* [[Help:Customization policy|Customization policy]]
-==Further Help and Feedback==
+== Further help and feedback ==
 {{Help and feedback section}}
-[[Category:Help]]
-[[Category:CSS]]
 [[de:Hilfe:Wie man Google Fonts importiert]]
 [[es:Ayuda:Cómo importar Google Fonts]]
+[[fr:Aide:Comment importer des polices de Google Fonts]]
+[[it:Aiuto:Come importare da Google Fonts]]
 [[ja:ヘルプ:Googleフォントのインポート]]
 [[pl:Pomoc:Importowanie Google Fonts]]
 [[pt:Ajuda:Como Importar Fontes do Google]]
-[[zh:Help:如何導入 Google 字體]]
+[[ru:Справка:Подключение Google Fonts]]
+[[tr:Yardım:Google Fontları nasıl içe aktarılır]]
+[[uk:Довідка:Підключення Google Fonts]]
+[[vi:Trợ giúp:Cách nhập phông chữ Google]]
+[[zh:Help:如何導入Google字型]]
+[[Category:Help]]
+[[Category:CSS]]