XF 2.1 Probably the best choice for XenForo default font.

ShikiSuen

Well-known member

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":
Less:
@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.
 
Last edited:

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.
 
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.
 
STEP 1: Add a template called "interfont.css":
Less:
@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.
 
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.
 
Back
Top Bottom