Fonts Change on some devices

Can anyone help me to determine why the font changes on some devices for the company website I work on?
www.liquidconsulting.se
The font should be futura only (at least for the most part). I check the site for problems on my android tablet, iphone, and iMac. But I went to the site on a laptop running windows and the fonts change to Helvetica on most the page but stayed futura at some spots.
I use the latest versions of rapidweaver, stacks, and foundry.

Only thing I can think of is that my base font is set to Helvetica in Foundry but I add the code to change the font to Futura in markdown when I need it. Would have been easier to figure out how to change the base font to Futura but I figured typing the code would be a sure way to make it futura.

Futura is not a “web safe” font – and it’s one that is rarely installed on Windows.

The standard fonts that are installed on each each platform are quite different. There are a few sites that track such things, like: https://www.cssfontstack.com/

But even this one only tracks windows/mac – not iOS or the multitude of Android devices which are now likely to be how most folks see your site.

Your choices for getting Futura on the page:

  • use Futura where it’s available and something similar on other platforms.
    This is a pretty good option. It’s fast because you’re relying on built-in fonts, but imperfect since your site may look substantially different in some places. If your brand depends on Futura – this is probably not an option.
    What other fonts? That’s a good question, there’s nothing quite like Futura in a built-in Windows font. I suppose Impact is at least grotesque and modern. But not nearly as quirky as Futura with its stylized “a” and “u” and it’s stranglely off-kilter “t” and “f”.

  • use a google web-font
    google is a cheap and simple way to include a web font. they have a bunch of Futura variants available.
    https://fonts.google.com/?query=futura
    you can include a web font on your page (ask the Foundation folks how to do this) the font will be downloaded and shown to users. this way everyone gets the same experience no matter the platform. the downsides? downloading fonts is slow. especially on mobile.
    and its a dependency on another service. if google shuts that down (unlikely but you never know) then you’d have to redesign.

  • a web font you own
    you can purchase a web font and include that with your site assets and link to it. i think the only reason to go this route is if you want a specific variant that Google doesn’t offer or if the site has a strict requirement on no external dependencies. lots of folks offer Futura-like fonts at various price points. you generally get what you pay for with fonts. quality will cost you a few hundred dollars. but knock-offs without the attention to detail can probably be had for free.

Isaiah

2 Likes

Wow you know your Fonts! Thanks for the help. Im not sure which way to go. If it was up to me I would have used a web safe font from the start.

Funny how Futura is installed on 94% of Macs and only 1.26% of Windows machines.

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.