How to use local fonts (for variable fonts)

[WildcatMedia]

I have been struggling to use fonts installed on our server. I have these as .woff2 files, along with a few others for backup.

Since the Flat Awesome + style has the xbEmbedFont property ("Embed Font:"), it might be possible to use code there to access the files on my server. But the example given in the documentation is solely for Google Fonts. If there is something I could use which would work there, for variable fonts, I'm all ears (or eyes) since anything else I've tried so far hasn't worked.

One method I have tried so far, which isn't working, is creating my own LESS template to use the @font-face property which includes all of the extras needed for variable fonts. These point right at the /data/assets/fonts directory I have created. (This is then properly accessed in a template using something like src: url("{{asset('fonts')}}/archivo.woff2") format('woff2'), which ensures it is stored in our Cloudflare R2 bucket for caching. I can access the font file in the browser, directly from that directory, so permissions are not an issue. I included my own LESS template just before the closing </head> tag, and I see that it is loading (wmg_fontsOnServer.less) when I view the page source.

<link rel="stylesheet" href="/css.php?css=public%3Aalnb_navigation.less%2Cpublic%3Anode_list.less%2Cpublic%3Anodeicon.less%2Cpublic%3Anotices.less%2Cpublic%3Ashare_controls.less%2Cpublic%3Awmg_fontsOnServer.less%2Cpublic%3Axb.less%2Cpublic%3Axb_design_mode ....etc...

I thought that perhaps I needed to add the MIME types to our Apache server, but that didn't help either. Yet @MattW mentions here that doing so isn't necessary. I can read the filenames in the /data/assets/fonts directory, and clicking on them causes the file to download.

Note: I set the style property Interface Font to the 'Archivo' font, and used 'Times New Roman' as a fallback so I can see if the font is loading properly. I also have Custom Font set to "Use Font Settings Below."

FYI: This is a variable font, and I am trying to explore ways to use it in a style so we only need to load one font file and use various adjustments to create the exact type we want. The Archivo font has three axes--weight, width, and italic. Weight in this font lets us set a weight anywhere from 100 to 900, vs. having fixed weights such as 200, 400, 500, etc. Width (aka font-stretch) in this font can be anywhere from 62% to 125%. Italic is an on/off axis, as opposed to other fonts which use the slant axis.

Once I get this font working, I can start working on various weights and widths to see how they work in Font Awesome +.

 

[Russ]

Did you define the "fonts" asset under the style settings? Go to Appearance -> Styles, click your style name. Technically, to use "{{asset('fonts')}}" you need to define the path for the fonts there.

 

[WildcatMedia]

Yep, that's set:

My custom template:

@font-face {
    font-family: 'Archivo';
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: block;
    src: url("{{asset('fonts')}}/archivo.woff2") format('woff2');
}

View source shows the template parsing correctly (the closing brace isn't shown in this screenshot, but it's there):

...so the directory is working correctly. If I copy that URL into the browser, the font file is accessible.

 

[WildcatMedia]

Dang it.

No sooner did I post my last reply when I tried something as a test and got it working.

I did need to add the MIME type to Apache, and apparently since ours is an older version, I had to use AddType application/x-font-woff2 .woff2 as opposed to AddType font/woff2 .woff2 that I was using already.

And the variable font is working nicely. The variable fonts are a nice change from fixed font widths! I've had some fonts where "bold" isn't bold enough, and cases where some of the headings in XF were too overbearing and the steps between font weights were too drastic.

Now I just need to find a variable font I like.

Thanks @Russ!

 

[Tracy Perry]

I did need to add the MIME type to Apache, and apparently since ours is an older version, I had to use AddType application/x-font-woff2 .woff2 as opposed to AddType font/woff2 .woff2 that I was using already.

Something that has been around for awhile.. it's something I discovered back in the 1.x days when I made a guide to add Google Fonts to be able to be used in XF over on the XF resource site (albeit it was for nginx, but Apache would probably need the same).