XF 2.3 Change font don't work?

[AndreaMarucci]

I'm in Admin > Xenforo default Style > Typography and I've changed the default font from what you see to

'Inter', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif

or

'Vend Sans', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif

but no font is working and the font is always visible in Helvetica Neue.

If I use Montserrat, don't know why, it works and the forum is shown in that font.

Can someone explain me where I'm wrong?

 

[Mr Lucky]

Have you actually installed the Inter or Vend Sans fonts? They need to be linked either in the page header or in extra.less

 

[AndreaMarucci]

No, I've just changed that value. I thought it was only necessary to change those values. Where can I find the correct procedure to follow?

 

[Mr Lucky]

No, I've just changed that value. I thought it was only necessary to change those values. Where can I find the correct procedure to follow?

See here for installing with CSS, ie in your theme extra.less

(first you must have the link to the font either on your own server or wherever the font is linked from)

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[AndreaMarucci]

I'll take it from google. Thanks I'll try.

 

[Mr Lucky]

See here for installing with CSS, ie in your theme extra.less

(first you must have the link to the font either on your own server or wherever the font is linked from)

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Note that in the example they give, you would have to edit the url to the path on your server where you have uploaded the font to.

 

[Mr Lucky]

I'll take it from google. Thanks I'll try.

If it's a Google font, I think they give you an html embed code for each font on the actual font page

 

[AndreaMarucci]

Google give me this

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Vend+Sans:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet">

and this

.vend-sans-<uniquifier> {
  font-family: "Vend Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

so I put the second in extra.less and the first one?

 

[Chromaniac]

you would need to put the first code in your page_container template or use an addon like this: https://xenforo.com/community/resources/ad-position-in-html-head.8502/

basically that imports the required font files from google servers. second code is not required as you are doing the change in style properties for it.

the other option is to get the code from @import section. put the code in the first box in extra.less without <style> </style> codes. that should also work. simpler. example code that you can directly put in extra.less to add Vend Sans:

@import url('https://fonts.googleapis.com/css2?family=Vend+Sans:ital,wght@0,300..700;1,300..700&display=swap');

First one appears to work better as second version appears to do font swap with some delay which looks kind of weird for the first load.

 

[AndreaMarucci]

Used the addon and worked perfectly, thank you very much!