Single post in Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides > Site Skins: How-To, and Helpful CSS >
QUOTE originally posted by Vaporeon26
[font=font here] Actual text here [/font] Make sure it's readable
It'll look like this: Actual text here
Instructions
1. On the font page, select the styles you need (ex: regular, italic, bold, bold italic)
2. Click the embed button on the right
3. Copy the URL in the href="" part of the embed, open a new tab, and go to the URL you copied
4. Copy the required character set definitions (at least Latin/normal/400) and add it to your post using a [style] tag
5. Apply the font as Vaporeon26 did above, or apply it using the font-family CSS in your [style] (you can use the demo CSS shown underneath the embed code on the Google fonts page - this is what I did - it defines a generic backup font for in case the webfont fails to load)
In my tests I could get away with using bold/italic for most English characters while only explicitly importing the normal definition, so that may be all you need. But tbh it's been a while since I did much with web fonts so ymmv.
This is some text in the Raleway font - it should display regardless of your device/browser. I've only imported the latin character set in standard weight for this example.
Code
[sc=font]This is some text in the Raleway font - it should display regardless of your device/browser. I've only imported the Latin character set in standard weight for this example.[/sc]
[style]
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.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;
}
.font {
font-family: 'Raleway', sans-serif;
}
[/style]
