Cassiopeia comes with Roboto pre-installed. Not just Roboto, but every Roboto-variation known to man. You do need to switch on the font scheme in the template Style, or it won't render.
This is good. For years I've been routinely using Google Fonts from CDN, but actually it's much neater to install fonts on your own server. And Google Fonts lets you download all their fonts for installation locally.
On a test page, I installed the Nunito font for headers myself: downloaded it from Google Webfont Helper (the hassle-free way to self-host google fonts, by Mario Ranftl), made a folder "fonts" in the template folder, uploaded the font files, and called it with @font-face in the CSS.
/* nunito-700 - latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
src: url('../fonts/nunito-v16-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/nunito-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-v16-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-v16-latin-700.svg#Nunito') format('svg'); /* Legacy iOS */
}If you don't choose a font in the template style, Cassiopeia will default to the a System Font Stack. I expect it is because of that, that Cassiopeia's CSS adds a font-weight, font-weight: 700; to the CSS rules for headers. So either install a font at 700, or override that font-weight rule.
(Of course, you can override the default font in your user.css).
FontAwesome
FontAwesome is also pre-installed. Version 5 Free (at the time of writing). However, I ran into a problem there: the Facebook icon (the one everybody seems to want on their webpage) wasn't rendering. The camera icon and the bicyle icon showed up, no problem.
To find the answer to that, I ventured on to Github. Always rather daunting, because on Github they're coding, and they're not there to answer silly user questions. I got lucky, though. Found an issue about FontAwesome and asked my question there - and got very helpful answers within minutes!
Turns out that in FA5, the CSS classes have been changed, different classes for Regular, Solid and Brand. As Facebook is a brand it is now fab fa-facebook (and no longer fa fa-facebook).
See the overview of available icons in the FA Cheatsheet.
FontAwesome unicode
Oh, and by the way: sometimes you want to use just the unicode and name the font-family, especially if you want to use an icon with ::before.
For instance, using the checkbox (unicode f046):
- apples
- pears
- oranges
In that case, the font-family is called "Font Awesome 5 Free" (took me ages to find that!).
I added class="fa-icon" to the <ul> tag, and the CSS looks like this:
.fa-icon {
list-style: none;
padding-left: 0;
}
.fa-icon li {
padding-top: .5em;
}
.fa-icon li::before {
content: "\f046";
font-family: "Font Awesome 5 Free";
color: brown;
margin-right: 15px;
font-size: 1em;
}And another thing that took me a long time to find: I was using f111, the circle, as a bullet point, but it showed up as an open circle, instead of a fat dot. Turns out that the font-weight determines whether an icon is solid or not. Adding font-weight:900; to f111 fills the circle.