Topic on Skin talk:Chameleon

Can someone recommend a 'good' way to change the site-wide font family used by Chameleon? I want to swap out the "fa-*" fonts with Montserrat and Roboto web fonts. Unfortunately, the customization guidance mentions "changing fonts ...", but not a word about this in the doc.

Any help appreciated ~z929669 Talk 14:27, 23 November 2020 (UTC)

It should work to change the variable $font-family-base.

Find the default value in https://github.com/ProfessionalWiki/chameleon/blob/master/docs/variables.md

Oh, you want to change the icon fonts. That is a bit more involved and would probably require a patch.

Thanks, I will look at changing $font-family-base. If I want to use Montserrat for headings and Roboto for body, will that work or am I limited to one font using that variable?

Don't I need to redifine @font-face as well in the CSS I assume and somehow override the defaults set in the SCSS files for fa-brand stock fonts?

I don't need to change the icon fonts, but it would be nice to alter their coloring in the CSS, which I haven't been able to do. I'm creating custom layouts and both light and dark theme variants, so icon coloring is something that should also change.

Great skin BTW ;)

Funnily enough I use exactly the same fonts on my wiki. I embedded them in my custom.scss with @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap'); and then set the headings to Montserrat and the body font-family to Roboto.

Since I use custom icons, I would be interessted in getting rid of the fa-solid-900.woff2 and fa-brands-400.woff2, too....

Wow, that was super simple. Glad it was easy for you to provide the exact code even ... great minds ... ;)

That is great, I was looking to change fonts too!

Once you do @import url(...) in custom.scss how do you specify which font is used when?

You're welcome :)
@148.252.129.14: You just use body { font-family: 'Roboto', sans-serif; } for example.

This is what I did in my custom CSS ... can do this using Gadget/Common.css or any other methods of injecting via your skin. I'm changing some of the defaults set by my skin (customized Chameleon), so this is just an example. your own tweaks will likely be necessary for your setup:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1rem !important;
}

/* Changes the default font used for MediaWiki headings to Montserrat: */
#content h1, 
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
 {
    color: #CCCCCC !important;
    font-family: 'Montserrat', sans-serif !important;
}

#content h1, 
#content h2 {
    border-bottom: 1px solid #a2a9b1 !important;
}

#content h1 {
    font-size: 2.1rem !important;
}

#content h2 {
    font-size: 1.6rem !important;
}

#content h3 {
    font-size: 1.4rem !important;
}

#content h4 {
    font-size: 1.3rem !important;
}

#content h5 {
    font-size: 1.2rem !important;
}

#content h6 {
    font-size: 1.1rem !important;
}

Thank you! :)

just to understand, looking at

$font-family-base

the default value, according to the link from @F.trott, is:

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Does that mean that Roboto is loaded by default?

I don't think so. It just gives the order of preference, so if Roboto is not available it will try Helvetica next.

understood - thank you