mellow lark
In Common.css, I am trying to edit my body and heading fonts separately. I have tried to search for existing posts on here to find out how. However I'm not sure why this isn't working.
Question: How exactly do you call the 'body' font vs 'firstheading' font and so on in Common.css?
sour salmon
I don't think that's how you import fonts from Google Fonts
sour salmon
Those font URLs don't point to fonts, they point to plain CSS files
Can you link to the wiki
mellow lark
Uh every time I do it says people can't access it because its private
this page should be whitelisted
The issue I'm having is then
1. Apparently I don't know what embed/import code to use from Google Fonts
2. I don't know how to refer to each level of font (body, heading 1, heading 2, etc.) in the common.css
sour salmon
Just use @import url("https://fonts.googleapis.com/css?family=Lora|Nunito&display=swap"); instead of those font-face declarations
mellow lark
So you can import multiple within the same font-face?
just separate them with a pipe?
sour salmon
You can't use @font-face you have to use @import
sour salmon
Yeah idk why css2 doesn't let you import multiple or even what's the difference
Like the output CSS looks the same
mellow lark
Hmm okay I have changed that but don't see any difference using ?debug=2 on my testing page, or in css common
do the mw-body content bits need changing
sour salmon
Oh nvm css2 supports multiple actually https://fonts.googleapis.com/css?family=Lora&family=Nunito&display=swap
But anyways
mellow lark
@import url("https://fonts.googleapis.com/css?family=Lora|Nunito&display=swap");
}
.mw-body-content .firstheading {
font-family: 'Lora', Serif;
}
.mw-body-content .body {
font-family: 'Nunito', Sans-Serif;
}
oh, the capitalisation matters?
hardy helm
is .body a class?
mellow lark
is .body a class?
I couldn't see anyone use it when I searched previous comments here, only ever saw headings
so it's a guess
sour salmon
Yeah .body is not a class that I know of
mellow lark
Do you know what the class for body text would be?
sour salmon
You can just use .mw-body-content
https://river.me/blog/dev-tools/ You should read this blog post to help you find CSS selectors in the future
hardy helm
:root {
--font-family-citizen-base: Nunito, sans-serif;
}
Hm okay I have changed it to that, but it doesn't seem to recognise either of them
it's defaulting to whatever the usual font for citizen is
sour salmon
Oh yeah I forgot Citizen actually has CSS variables
mellow lark
```css
:root {
--font-family-citizen-base: Nunito, sans-serif;
}
```
this doesnt seem to do anything sorry
mellow lark
<https://river.me/blog/dev-tools/> You should read this blog post to help you fi...
thank you
hardy helm
It does for me
mellow lark
/* CSS placed here will be applied to all skins */
/* FONTS */
@import url{("https://fonts.googleapis.com/css?family=Lora|Nunito&display=swap");
}
:root {
--font-family-citizen-base: Nunito, sans-serif;
}
As Kocka said
@import url("https://fonts.googleapis.com/css?family=Lora|Nunito&display=swap");
:root {
--font-family-citizen-base: Nunito, sans-serif;
}```The code is "working" but the font is never imported because the syntax is invalid
mellow lark
I thought they were meant to be separate
mellow lark
```css
@import url("https://fonts.googleapis.com/css?family=Lora|Nunito&display=...
does @import not have a curly bracket ?
hardy helm
No
mellow lark
Hm i have copied it over directly to be sure, still no dice
sour salmon
Oh I forgot, the URL itself isn't correct
It works for me
sour salmon
Oh nvm css2 supports multiple actually <https://fonts.googleapis.com/css?family=...
But if you want to use css2 instead of css then this would be the link
sour salmon
https://developers.google.com/fonts/docs/css2 it's probably unimportant
hardy helm
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@600&family=Nunito:ital@0;1&display=swap');
but it took 15 mins to even update the debug=2 disabled cache or common css pages
sour salmon
No yeah css2 has a different way to specify families
mellow lark
@import url("https://fonts.googleapis.com/css?family=Lora&family=Nunito&display=swap");
:root {
--font-family-citizen-base: Nunito, sans-serif;
}
this is what it looks like now
And it recognises the body font
Now just need to add in the heading again
Looking at other posts, would it be something like
.mw-body .firstHeading, .mw-body-content h1, .mw-body-content h2, .mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6, .mw-heading1, h1, .mw-heading2, h2 {font-family: 'Lora';}
Because I don't know what it would be as the variable (?) Unai made?
hardy helm
The variable I posted was specifically for body text
mellow lark
would there be a way to make ones for the heading levels, or headings overall, or do they need to be referred to like the above
Apologies for being dense
hardy helm
You can use that, although I'd go for a cleaner (and safer) way with
.mw-heading, .mw-page-title-main {
font-family: Lora;
}
Citizen relies heavily on CSS variables and intends you to use them so you can quickly overwrite stuff without worrying if you used enough selectors or not. That said, you can use normal selectors if you need anything specific. It's just ergonomics.
mellow lark
That looks like it has worked for the testing page
All headers are now Lora, all body font (confirmed via Inspect) is Nunito
mellow lark
Citizen relies heavily on CSS variables and *intends* you to use them so you can...
So, for a newbie, you define variables just by stating them with --, in common.css, and they refer to something in the citizen css?
hardy helm
Yup, I recommend checking the Computed tab (if you're on Chrome) to confirm the font has loaded
mellow lark
hardy helm
So, for a newbie, you define variables just by stating them with `--`, in common...
CSS variables (technically, they're called Custom Properties) allow you to set a value and use it elsewhere
Citizen relies on variables so its design is consistent
You can use them, or you can just brute-force your way with normal CSS
They do appear in devtools if you want to check them out
mellow lark
I think I get that, but I don't understand how one can make an arbitrarily named variable and the system knows how that refers to the body font, for example
hardy helm
If you click on that it should scroll to the variable declaration (usually, at :root)
mellow lark
unless it isn't arbitrary, the name of the variable?
hardy helm
I suggested that variable because, as you can see, the original Citizen CSS refers to --font-family-base, which value is var(--font-family-citizen-base), var(--font-family-language-base), system-ui, -apple-system, sans-serif
And down the rabbit hole, --font-family-citizen-base is 'Roboto', 'Roboto-fallback' (originally), so I overwrote it. I could have overwritten html, body {} or --font-family-base as well, but this path was safer.
hardy helm
unless it isn't arbitrary, the name of the variable?
They're always arbitrary (hence why they're called custom properties). You just need to know which ones Citizen is declaring/using, and devtools will always tell you that
mellow lark
Ah I think I see
So when you're declaring a variable, it isn't just a random name which you're assigning value to, it's an existing value somewhere in the citizen css that you are changing the value of?
oh
noted, I'll see if I can use dev tools in future
hardy helm
Ah I think I see
So when you're declaring a variable, it isn't just a random nam...
Yup
I mean you can declare your own as well
mellow lark
that makes much more sense
hardy helm
I did that in my wiki using Citizen
But yes, Citizen's modern CSS in a way makes it more difficult as you need to be aware of more things
mellow lark
It was worth it for the wiki looking like it is from the 2020s without having to change too many things manually
hardy helm
For example, this is how I changed colors
:root {
--color-progressive-oklch__l: 26.53%;
--color-progressive-oklch__c: .0136;
--color-progressive-oklch__h: 290.72;
--color-surface-0: #f8f8fc;
--color-surface-1-oklch__l: 100%;
--color-surface-1-oklch__c: 0;
--color-surface-2-oklch__c: 0;
--color-visited: #36c;
}
I adjusted the palette and Citizen uses these variables so everything changed cleanly with just a few lines
mellow lark
woah
so if you know what variables you're looking for you can just do a bunch of them within one root
and change them
hardy helm
yup
mellow lark
useful to have them all lined up in the common css like a buffet
hardy helm
Other skins would require you to go down the rabbit hole and find every single selector and pray you didn't miss one 
(Cosmos is a special case)
jaunty lake
Ah I think I see
So when you're declaring a variable, it isn't just a random nam...
citizen provides their own styling. when you write to your citizen.css, it loads after the default provided values, hence cascading
you can make your own variables, it doesn't have to be the same one citizen is using
mellow lark
citizen provides their own styling. when you write to your citizen.css, it loads...
So is there a hierarchy of these css files?
Common is above citizen, is above template specific css
jaunty lake
yes there is a load order
jaunty lake
there was a write up, i can't find it anymore. but off the top of my head it is
Common.css
skinspecific.css (like vector.css)
user common.css
user skinspecific.css (myname/vector.css)
inline css
so if you want to test things before showing everyone, you go to your personal css pages to preview how it would look to the whole world
mellow lark
So to summarise for my and others' future reference:
Question:
How do you change fonts across a wiki using the Citizen skin, with a different font for the body and the headings. These fonts are free fonts imported via url from Google Fonts.
Response:
Common.css should include something like this:
@import url("https://fonts.googleapis.com/css?family=Lora&family=Nunito&display=swap");
:root {
--font-family-citizen-base: Nunito, sans-serif;
}
.mw-heading, .mw-page-title-main {
font-family: Lora;
}
Notes
Big thanks to @hardy helm, @sour salmon and @jaunty lake for your time and patience. It is very much appreciated
hardy helm
there was a write up, i can't find it anymore. but off the top of my head it is
...
(not sure why they put it after user, but anyways)
hardy helm
So to summarise for my and others' future reference:
**Question:**
How do you c...
This doesn't load Nunito, by the way
hardy helm
It's declared in the CSS, doesn't mean it's actually loading Nunito
You probably got it installed locally
mellow lark
oh
I do yeah
Hmm
Will be a problem if others use it
Does that mean the import link from google fonts is wrong
hardy helm
They won't see Nunito, they will see the fallback which in my case is Arial
hardy helm
Does that mean the import link from google fonts is wrong
Yes
mellow lark
accursed 2009-ass font
What would be the correct import link? Or would it just be trial and error
hardy helm
```css
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@600&famil...
Well, you can fix the original link but I'd just use this
Lora and Nunito are variable fonts, and the legacy API can't really handle them (it outputs static fixed-width versions). The newer API (css2) does
mellow lark
ahh I see
this is freaky, its made mediawiki the body font and common.css the heading font
hardy helm
oh i forgot citizen separates those lol
Use #firstHeading instead of .mw-page-title-main
mellow lark
seems like its fixed it
sour salmon
oh i forgot citizen separates those lol
Vector 2022 does too
mellow lark
Just in case I come back to this and want to change other heading levels, do you know how i'd find the equivalent of #firstHeading for:
big { (so <big></big>)h2{ (so == heading 1 ==)h3{ (so ===heading 2===)
hardy helm
(I would discourage using <big>)
hardy helm
But that's a separate conversation
mellow lark
haha
hardy helm
Just in case I come back to this and want to change other heading levels, do you...
Well, it is that. But h2 are used in other ways too so I'd use a more specific selector
.mw-heading2, .mw-heading3 { ... }
mellow lark
.mw-heading2, .mw-heading3 { ... }
Really sorry, but does this still need #FirstHeading after it, or something else?
only ask because it reverts back to nunito when I do stuff like <h1 style =>
and not having firstHeading produces an error
hardy helm
Probably because of the comma
Also, <h1-6> use .mw-html-heading
If you want Lora for all headings, .mw-heading, .mw-heading-html, #firstHeading { font-family: Lora; }
mellow lark
I think if I want to change them in future it might be better to have the levels separately, this seems to work:
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@600&family=Nunito:ital@0;1&display=swap');
:root {
--font-family-citizen-base: Nunito, sans-serif;
}
.mw-html-heading, #h1 {
font-family: Lora;
}
.mw-html-heading, #h2 {
font-family: Lora;
}
.mw-html-heading, #h3 {
font-family: Lora;
}
.mw-html-heading, #h4 {
font-family: Lora;
}
shit, no it doesnt. the caching is my worst enemy
mellow lark
I used .mw-html-heading, and it affects <h1 style></h1> within a column template, but not when I just use <h1></h1> more generally:
but does work now
mellow lark
Also, #h1 selects the `h1` id, not the `h1` HTML tag
Ah okay, I am using the dev tools/inspect more but still not the most experienced
I give up. No longer works. the delay makes it impossible to test what works.
I'll just wait
spiral venture
I would suggest a browser tool like Stylus to test changes before applying them to Common.css
mellow lark
Thank you
hardy helm
Personally I vouch for https://github.com/webextensions/live-css-editor
mellow lark
Looks like it is working
mellow lark
Personally I vouch for https://github.com/webextensions/live-css-editor
bookmarking this
Not sure how it's supposed to work actually
installed the extension but not sure where it shows it applied, on the page you're on?
mellow lark
Oh i can pull up the popup thing but when I put the css in it, I'm not sure what I'm supposed to be looking at
hardy helm
That will automatically apply styles to the page
it also auto-saves so even if you accidentally close the tab you keep your CSS
then after you're done testing you move it to Common.css or wherever
mellow lark
oh it shows you if nothing on the page matches whatever you're referring to as well
nice
trying to find a page with something I can easily identify
hardy helm
yup it also higlights them on the page which is handy
use devtools to find HTML selectors
mellow lark
struggling on twitter
hardy helm
X/Twitter and similar platforms usually compile their classes so the HTML isn't particularly readable by humans
mellow lark
I'm really sorry for being dense, what colour will selectors be
hardy helm
should have a red outline
mellow lark
i have mid blue, light blue and orange
hardy helm
uhh stylus or the one i linked?
mellow lark
the one you linked
i'm looking at devtools
just trying to find a selector I can test
iom selecting text but i dont know how to find the selector for that text
like a simple one would be to select some text look in dev tools and find what its called
but i can't find it
Okay so it will be in the middle bar in elements I think
hardy helm
iom selecting text but i dont know how to find the selector for that text
I'd recommend taking a CSS crash course to understand how it works
You can find selectors with either devtools or the extension I linked
mellow lark
I'd recommend taking a CSS crash course to understand how it works
Will be a good shout. Even if I just understand what all the definitions are
