XF 2.1 Probably the best choice for XenForo default font.

[ShikiSuen]

Inter font family

Inter is a typeface family

rsms.me

This is a free alternative of Apple San Francisco but designed better to me,
and it is a variable font (which means you can control its boldness as you wish).

I converted it into base64 and embedded it into my XF style theme on my website. Looks awesome.

(Helvetica Neue looks way too condensed; Segoe UI looks distracting.)

------
If not gonna host the font file on the server, there's a simpler way to call it from the font developer's server:

STEP 1: Add a template called "interfont.css":

@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

STEP 2: Open the template "PAGE_CONTAINER" and find the following line:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Add <xf:css src="interfont.css" /> right beneath it.

STEP 3: Edit font fallback sequence to:
'Inter var','Inter',-apple-system, BlinkMacSystemFont, Tahoma, Arial, Arimo, Roboto, sans-serif

P.S.: My hesitation of putting its CSS code in Extra.less is because I am afraid that webfont declarations should be placed before all other CSS definitions.

 

[Joe Kuhn]

Inter font family

Inter is a typeface family

rsms.me

This is a free alternative of Apple San Francisco but designed better to me,
and it is a variable font (which means you can control its boldness as you wish).

I converted it into base64 and embedded it into my XF style theme on my website. Looks awesome.

(Helvetica Neue looks way too condensed; Segoe UI looks distracting.)

Will have to check it out. Thanks for the tip.

 

[Joe Kuhn]

So how would I add 'Inter' to my font list for posting messages in my forum? Sorry, I'm new at this. I searched as an admin for 'font' and found the lists of possibles, but I'm sure a font file has to be uploaded first before adding it to a list. Some simple steps from an expert like yourself would be helpful. Thanks.

 

[Joe Kuhn]

Will probably make it the default for postings. I like the look of it, but want to see it in context.

 

[ShikiSuen]

Will probably make it the default for postings. I like the look of it, but want to see it in context.

I updated the initial post and you can see how to do it.

 

[briansol]

If not gonna host the font file on the server, there's a simpler way to call it from the font developer's server:

this is a horrible idea... never trust another's server.

 

[Joe Kuhn]

this is a horrible idea... never trust another's server.

I'd rather host the file. Agreed.

 

[ShikiSuen]

I'd rather host the file. Agreed.

Then replace the content of the template "interfont.css" with the following:
(File is really big.)

NOTE: I may remove it at any time. Consider downloading woff2 files and convert them to web css base64 format by yourselves.

Inter Webfont in CSS

GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

 

[ShikiSuen]

this is a horrible idea... never trust another's server.

You can put it in one of your GitHub repositories.

 

[Mr Lucky]

STEP 1: Add a template called "interfont.css":

@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

STEP 2: Open the template "PAGE_CONTAINER" and find the following line:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Add <xf:css src="interfont.css" /> right beneath it.

STEP 3: Edit font fallback sequence to:
'Inter var','Inter',-apple-system, BlinkMacSystemFont, Tahoma, Arial, Arimo, Roboto, sans-serif

P.S.: My hesitation of putting its CSS code in Extra.less is because I am afraid that webfont declarations should be placed before all other CSS definitions.

This seems to fallback to Inter, ie not showing Inter var.

 

[Mr Lucky]

But works fine on my wordpress site.

 

[ShikiSuen]

This seems to fallback to Inter, ie not showing Inter var.

This is because IE doesn't support variable fonts.
Variable fonts only needs one woff2 file to deal with all font weights supported by Inter. The total data size is lesser than two font weights of the non-variable Inter.

P.S.: Forget about IE. Windows users are supposed to use Edge Chromium now, even for Windows 7 users.