Single post in Guide to CSS (Beginner & Intermediate) [In Progress]
Forum Index > PokéFarm > Guides > Guide to CSS (Beginner & Intermediate) [In Progress] >
@Tarashia
I was writing up some steps with screenshots because I didn't know you had a post about it already :) If you want to include the screenies in your post feel free to.
@StarWarsGirl If you follow Tarashia's post you can use any font, but here's the code to copy and paste anyway:
How to get any font you want:
0. Open the font you want in Google FOnts
1. Click 'Select this style'
2. Open the sidebar
3. Click 'Embed'
4. Copy the link (highlighted in the screenshot) and open it in a new tab
5. In the page that pops up, copy the section
/*latin*/
@font-face {
....
}
6. Use it in your CSS like this (the bold names must match)
[sc]Hello![/sc]
[style]
div {
font-family: 'Amatic SC', sans
}
/* latin */
@font-face {
font-family: 'Amatic SC';
font-style: normal;
/* skipped for brevity */
}
[/style]
@StarWarsGirl If you follow Tarashia's post you can use any font, but here's the code to copy and paste anyway:
Almost before we knew it, we had left the ground.
Code
[style]
.font {
font-family: 'Amatic SC', cursive;
font-size: 30px;
}
/* latin */
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(https://fonts.gstatic.com/s/amaticsc/v15/TUZyzwprpvBS1izr_vOECuSf.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]
5. In the page that pops up, copy the section
/*latin*/
@font-face {
....
}
6. Use it in your CSS like this (the bold names must match)
[sc]Hello![/sc]
[style]
div {
font-family: 'Amatic SC', sans
}
/* latin */
@font-face {
font-family: 'Amatic SC';
font-style: normal;
/* skipped for brevity */
}
[/style]Avatar by Kaelwolfur.
Sent from my PokéNav