No edit summary Tags: Help rte-source |
m (Reword, formatting, links, interwiki) Tags: Help sourceedit |
||
Line 1: | Line 1: | ||
+ | {{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. |
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://fonts.google.com. |
|
⚫ | |||
⚫ | # On the “Your Collection” module, click “@IMPORT”. This will display a snippet of code that includes the syntax, <code><nowiki>@import 'http://fonts.googleapis.com/css?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. |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
− | |||
⚫ | |||
− | |||
⚫ | |||
− | |||
⚫ | |||
− | |||
⚫ | |||
If you decide to import multiple Google Fonts, you can either repeat the steps above for each font or follow the steps explained below. |
If you decide to import multiple Google Fonts, you can either repeat the steps above for each font or follow the steps explained below. |
||
Line 19: | Line 16: | ||
Once you're happy with your selection of fonts, 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 |
+ | == Further help and feedback == |
{{Help and feedback section}} |
{{Help and feedback section}} |
||
− | |||
[[de:Hilfe:Wie man Google Fonts importiert]] |
[[de:Hilfe:Wie man Google Fonts importiert]] |
||
[[es:Ayuda:Cómo importar Google Fonts]] |
[[es:Ayuda:Cómo importar Google Fonts]] |
||
⚫ | |||
[[ja:ヘルプ:Googleフォントのインポート]] |
[[ja:ヘルプ:Googleフォントのインポート]] |
||
[[pl:Pomoc:Importowanie Google Fonts]] |
[[pl:Pomoc:Importowanie Google Fonts]] |
||
Line 34: | Line 31: | ||
[[vi:Trợ giúp:Cách nhập phông chữ Google]] |
[[vi:Trợ giúp:Cách nhập phông chữ Google]] |
||
[[zh:Help:如何導入 Google 字體]] |
[[zh:Help:如何導入 Google 字體]] |
||
⚫ | |||
[[Category:Help]] |
[[Category:Help]] |
||
[[Category:CSS]] |
[[Category:CSS]] |
Revision as of 20:50, 30 December 2016
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 the "+" button to the right of the font’s name. This will cause a bar to appear at the bottom of the window that reads “1 Family Selected”. Click on the bar to see the “Your Collection” module.
- On the “Your Collection” module, click “@IMPORT”. This will display a snippet of code that includes the syntax,
@import 'http://fonts.googleapis.com/css?family=Font+Name';
whereFont+Name
will be the name of the font you chose, with spaces in the name replaced with the plus sign. - 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. This is usually at MediaWiki:Common.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 “+” 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