Hoping someone can help, as there are various related topics on here, but I couldn't find one that solves my issue.
I recently rebranded our documentation portal and found that it does not always display one of our custom web fonts. It seems to only be an issue on Linux and macOS. I am using Windows and everything is fine as far as I can see.
The custom font files are in my project and are included in the built output (HTML5), which is accessible within our web application. My Online.CSS references the files using font-face definitions for each font-family and corresponding WOFF, WOFF2, EOT, and OTF file.
One of my custom fonts works fine for everyone (Soin Sans Neue), but the other does not (Graphik). I previously had Graphik working fine, but renamed some font files and reorganized the font folders in my project. But I updated the CSS to reference the new font file names/locations. I have also made the links to the font files lowercase as I have the "Use lowercase filenames" option selected in the target.
My portal looks fine on Windows (I tried a few different browsers), and when I inspect the page, the correct font is being used. Times New Roman is showing where the custom font should on some machines running macOS and Linux. It works fine for some macOS users.
Any ideas? I am completely stumped.
Custom web fonts not showing on all machines
Re: Custom web fonts not showing on all machines
Double-check that the capitalisation of the path in the output exactly matches what you've typed as it's possible something different is happening than you expect. (you've said it works okay for some Mac users, so probably this isn't the issue, but worth confirming)
You could also try clearing the browser cache and getting the server administrator to clear the server cache, to rule out some old file being served and causing the error.
You could also try clearing the browser cache and getting the server administrator to clear the server cache, to rule out some old file being served and causing the error.
Re: Custom web fonts not showing on all machines
When you say "I previously had Graphik working fine", does that include the macOS and Linux environments that aren't working right now?
If they did work beforehand, then you can narrow down the problem specifically to what you've changed around the filenames and locations.
If it's never worked for those environments, or you don't know, then the issue could be something else not related to your changes.
For example, is @font-face set up correctly to support the browser versions being used on macOS/Linux, or do those browsers need 'deeper' support for TTF or SVG fonts? See https://css-tricks.com/snippets/css/using-font-face-in-css/#aa-deepest-possible-browser-support
For the environments that don't work, open the 'developer tools' option in the browser and check what errors are displayed in the 'console'. How you do that depends on the browser.
Also, make sure that you (or anyone testing this) does not have any of these fonts installed on their own computer. Otherwise, it'll appear to work because the browser will use the locally installed font, but you won't realise the web font isn't working.
I'm assuming the portal is published to a server. Check the server to make sure the files have been published and the filenames are in the correct case.
If they did work beforehand, then you can narrow down the problem specifically to what you've changed around the filenames and locations.
If it's never worked for those environments, or you don't know, then the issue could be something else not related to your changes.
For example, is @font-face set up correctly to support the browser versions being used on macOS/Linux, or do those browsers need 'deeper' support for TTF or SVG fonts? See https://css-tricks.com/snippets/css/using-font-face-in-css/#aa-deepest-possible-browser-support
For the environments that don't work, open the 'developer tools' option in the browser and check what errors are displayed in the 'console'. How you do that depends on the browser.
Also, make sure that you (or anyone testing this) does not have any of these fonts installed on their own computer. Otherwise, it'll appear to work because the browser will use the locally installed font, but you won't realise the web font isn't working.
I'm assuming the portal is published to a server. Check the server to make sure the files have been published and the filenames are in the correct case.
Re: Custom web fonts not showing on all machines
Thanks for both of your replies.
I ended up reverting the filenames, but it turned out that the issue was that my font-face definitions weren't correct. I had a src before each font file and separated each font file with a semicolon, whereas I should have only have one src and separated them with a comma.
All good now.
I ended up reverting the filenames, but it turned out that the issue was that my font-face definitions weren't correct. I had a src before each font file and separated each font file with a semicolon, whereas I should have only have one src and separated them with a comma.
All good now.