XF 2.2 How to change font

[Alvin63]

I've searched for answers to this but didn't understand some of them. I'd like to change the default font to the one below. Not sure what it is. I know you can change it in typology but I am a bit nervous about change the string of type as I don't understand what each element does.

 

[Alvin63]

I've searched for answers to this but didn't understand some of them. I'd like to change the default font to the one below. Not sure what it is. I know you can change it in typology but I am a bit nervous about change the string of type as I don't understand what each element does.

View attachment 253725

Ok so this is what I have in Typography. I assume I change font titles to what I want but a bit scared of messing it up and not being able to revert. So do I just keep the same format and change the font titles? There seem to be a few fonts in each line which is confusing.

 

[Paul B]

Those fonts are used throughout the system - changing them there will change all instances where they are used.

As I posted in your other thread, if you are going to be making specific styling changes such as this then you will need to use the browser inspector and the extra.less template.

 

[Alvin63]

Thank you for reminding me - I was taking a lot in at that time and didn't quite understand where to put that. So I don't change anything in the Typology boxes above then? Just add the code to extra less? I can't see an extra less code box on the Typology page. Sorry I am being so dim!

 

[Paul B]

You need to navigate to the templates section in the ACP.

 

[Alvin63]

Ah ok thank you. I don't have that. I just have this. I think it's Arial I want to use - so could I just change Segoe UI to Arial in Typology? And leave everything else the same. Or is extra less the better way to do it? Assume I need to import that?

 

[Paul B]

Click on Templates ...

 

[Alvin63]

Thank you! I am learning so much from you. So if I change the font in there, will it automatically change in Typology?

 

[Paul B]

The system fonts are used throughout the system.
If you want to change the font everywhere, use the Typography style properties.

If you want to change the font for an individual item, such as node titles, use the extra.less template to override the default setting.

 

[Alvin63]

Ok that changed the top title line thank you. I am wanting to change the font for the nodes as well.

 

[Alvin63]

The system fonts are used throughout the system.
If you want to change the font everywhere, use the Typography style properties.

If you want to change the font for an individual item, such as node titles, use the extra.less template to override the default setting.

Posted at the same time. Ok I am with you. So what would I put in extra less to change the node fonts? Would it be .p-node-value ?

Used Typology to change the node headings Thank you very much. I was so stuck on fonts.

I am still not keen on the top heading (forum name) above the nodes and wondered if I can put it in its own coloured box.

 

[Alvin63]

Also for colour can I put say rgb(26, 54, 153) - instead of black or blue? Answered that one myself - yes that works.

So now I need to a) Change the typeface and text colour for the first node parent and b) Put the forum heading in a coloured box.

 

[Alvin63]

Sorry to keep asking so much. In Typography I have normal font weight 400 for main text. I want to leave it at that for the forum heading and the first node heading, but have the child node headings heavier/emboldened - in 600. Assume I need to do that in extra.less as well?

Also whatever colour or text weight I have for the parent node boxes, they look kind of fuzzy and a bit bleached out. Not solid colour like the top logo box. I am not sure why.