Single post in Codes and things
Forum Index > PokéFarm > Journals > Codes and things >
How to use Google Fonts.
https://fonts.google.com/
Please choose your fonts carefully - decorative/artistic fonts should be used sparingly, as decoration, headers, etc. Never use cursive, decorative, or artistic fonts for large blocks of text. Keep in mind that this site has legibility guidelines in its rules.
I will be using this font as an example:
https://fonts.google.com/specimen/Righteous
- Click the "+ Select this style" button on the right side of the font preview area.
Screenshot
- A sidebar should open on the right, but if it doesn't click the square/+ icon in the very upper right of the page. (shown in upper right of screenshot above)
- Change from the "Review" to the "Embed" tab on the side bar. Under "Use on the web", change the radio button to "@import". Copy the URL only from the code - make sure to not grab either of the single quotes.
Screenshot
- Paste that link into a new browser window/tab. You should see some codes. Most English speakers should only need the /* latin */ block, but for other characters you may need latin-ext or perhaps even other alphabets (if available). You may need to scroll down to find it. Copy it.
Screenshot
- Include that code in your [style] tag, then use the [font=?] tag or font-family CSS property to apply it to the area you want it. If the font name has a space in it, you must put single or double quotes around it.
This is some sample text with the font tag.
Another example
This is a display box with the font as its header.Code
[font="Righteous"]This is some sample text with the font tag.[/font] [display=Another example]This is a display box with the font as its header.[/display] [style] .panel h3 { font-family: "Righteous"; } /* latin */ @font-face { font-family: 'Righteous'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/righteous/v9/1cXxaUPXBpj2rGoU7C9WiHGF.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } [/style]
