Font Inconsistencies across Mac and PC platforms

You will forgive me for asking what might be a very simple question, but can someone tell me why I am seeing my website displaying two different fonts across the same website viewed through different operating systems? All looks fine here at home on my mac however when viewed on a PC using Firefox, Chrome or IE what would normally be Helvetica Neuve ends up looking like Time New Roman ( see attached screen shot ) in both the navigation and the body of the site. I’m using Rapidweaver 8.3, Stacks 4 on the Foundry framework. Any help and/or advice would be gratefully appreciated. Kind Regards | Justin

Is it happening on multiple PCs or just one? You said IE what version of windows(IE has been replaced by Edge)?
Font’s can work differently on different machines. You have a CSS font-family element that will suggest more than dictate what font a browser will use.

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Ask’s the browser touse "Helvetica Neue" if it’s installed, if not then use Helvetica, and if that isn’t available, then try Arial, and so on, from left to right.

The browser can also have a style sheet that overrides everything that you say. The user is in ultimate control.

What’s strange is you are getting a serif font, not a sans-serif. If it’s a machine you have access, then the only way to say for sure is to use the developer tools in the browser.

I don’t have a windows machine at all right now to test it out. But if you want to post a URL, perhaps someone here on the forum could test it for you.

1 Like

Ok so it might be that during one of my tests I was using Microsft Edge. I can’t remember and will have to double check that it wasn’t IE. But how do you explain that this would appear to also be showing on Firefox and Google Chrome ( see attached image ) ?? I of course have the benefit of ‘testing’ it in the school of computing here at my University on a PC, however for those Rapidweaver users who don’t have the opportunity to do so, is why I am making this enquiry. Please see another screenshot showing my use of Helvetica Neue as my base font in Foundry’s Site Wide Settings Panel. Kind Regards | Justin

Font-family is a request. If the font isn’t on the computer, the browser can’t use it. That’s why the font-family has multiple “fall back” fonts listed.

The computer could have a user style sheet. That can override any style the website uses.

There’s quite a few users here on the forum that have regular access to windows machines.

If you want to know if it’s a general problem then post a URL to the site or use the browsers developer tools to determine what exactly is settings the font.

1 Like

So I take it then that all operating systems come with a standard font installed that should include Helvetica Neue amongst others and that these fonts form the list in Foundry’s site wide settings. Is there any chance that we could get to choose what ‘secondary’ font the computer defaults too in the absence of the primary font not working/being installed? Thanks for all your help and support thus far Doug Bennett.

In short…Nope.

Until I started messing around with web design as a hobby I never knew how complicated the world of fonts could be.

If your website doesn’t provide the font your computer will use the next best option (usually a fallback font from the same family) to display site contents.

Providing the font you want your visitors to use is the best option. Google have many free fonts for web use, or you can buy the font you want but make sure it is licensed as a web font. Most font packs you see on offer are usually for desktop use only, so check beforehand.

I don’t have Foundry (use Font Pro from Joe Workman) but I believe it has a stack that you can use to specify which font files to load and use.

So best advice is find a font you like, buy it or find a free equivalent on Google fonts, get the file and add them to your project. That way you can display your site as you intended it to be seen.

Hope that helps!

Web font are controlled by the CSS font-family statement.

CSS rules get applied to the HTML elements based on different conditions.

  • CSS uses what’s called selectors to choose what HTML elements to apply the styling too.

  • The page being viewed can and usually does have multiple CSS style sheets loaded and applied to the HTML (hence the name Cascading Style Sheets).

  • Browsers can have their own CSS style sheet installed

  • Every single HTML element on a web page can and usually does have multiple styling rules being applied to it, from multiple style sheets.

  • Browsers have rules of how to apply to style to an HTML element that has multiple styles offered to the same elements attribute. It’s a complicated formula, including things like the style sheet order, selector specificity.

  • The CSS font-family statement provides what’s called a ”font stack” to be applied left to right order. The first one it can find and use will be applied.

  • These font stacks can be one name or 25 or more fonts.

All this and even more make it impossible for anyone to say exactly what happened with fonts on the windows machine you experienced the issue with, without having access to the machine and know how to use the built-in developer tools.

If you think you have uncovered a problem that might be affecting all Windows machines then the fastest way to find out would be to post the URL in question here on this forum. There are quite a few users here that are polished developers tools users that have access to windows machines.

They’ll happily report back if they see the same thing and if so what’s causing it.

I’m betting it’s specific to the school machine you are using. From the screenshot you posted above it looks to be an older version of windows(just judging from the logos).

Also, the font stack that Foundry uses is

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

If you notice the last entry is what’s called a generic don’t. sans-serif. That tells the browser ”give me your default sans-serif don’t. Your screenshot shows a serif font.