Why are fonts different across different platforms?

[Pedroseph (Pedro Pereira)]

I have created a website for my company and am relatively happy with the outcome. I just am confused as to why the font is different across Mac, Windows and platform (phone v pc). This happens regardless of theme.

Also, could anyone suggest improvements… This may be cheeky to ask and apologise if this isn’t allowed.

Here is my website:

https://www.simple-tech-solutions.co.uk/

[thang (David)]

This recent post might help you:

Fonts Change on some devices

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 …

[Pedroseph (Pedro Pereira)]

I have attempted to use google fonts but I don’t know where I’m going wrong, any chance you could link me to something useful or explain? I have attempted to look myself but haven’t gotten anywhere. Thank you though, I will go for the 2nd option.

[isaiah (Isaiah Carew)]

Here’s the quick and dirty How To page from W3 Schools on using Google fonts: https://www.w3schools.com/howto/howto_google_fonts.asp

It’s also a great example of why you should be very careful when adding fonts. That page takes about 15 seconds to load on my fast desktop machine with a 1Gb/s 'net connection. IT’S SO SLOW!

Fonts are a huge download – so you should use them sparingly and only in the right way. Just bolting them on to a site will make it… well… just like that page up there – SLOW.

The right way in RapidWeaver is to modify the theme to apply the font uniformly on the whole site. This involves coding. If that’s not comfortable for you, you’ll need to find someone to do that work for you – or (probably a bit more cost effective) find a theme that has the right font for you.

<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<style>
body {
    font-family: 'Sofia';font-size: 22px;
}
</style>

You’ll need to add both a link to the font itself – and then tell it which parts of the theme to apply the font to. That’s the easy bit. it’s the first line above that starts with <link href…

The next bit is the hard bit. Since you’re already using a theme – you need to override that theme’s font choices and replace them with your own. This will be different for every theme out there.

Once you’ve modified the theme, make sure to save a backup copy of your modifications. If you ever download an update to that theme you will want to make sure to keep your modified version separate.

Isaiah