WildcatMedia
Customer
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
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 +.
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.
HTML:
<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 +.
