Hi, I have a question about font appearance. Only a novice at building sites so don’t have a great level of understanding but here goes. I have been using Multithemes XLabel on rapidweaver 7 and the site looks lovey on nearly all computers. I’ve been careful to only use the theme’s own default fonts that you get when you use the HTML heading 1 - Heading 6 options on the text. I’m aware that there are certain fonts that are considered web safe but assumed any that were built into the theme were good to go. Really pleased with the overall design but today I viewed it on an windows 10 laptop using MS Edge and the text was all displayed in what I think was times new roman. It still looks ok but isn’t how it displays on my Mac, iPad or even the windows 10 PC I use at work. Is there something I need to do (that doesn’t involve understanding lots of code) to make all browsers display the fonts correctly?
My guess is that the theme uses non-system fonts (i.e. not Arial, Helvetica, Tmes New Roman, etc.). When using non-system fonts, the font files are downloaded to the web browser just like any other page element. If for some reason the font file is not able to be loaded, web browsers will substitute a system font in their place.
If you are not seeing the issue on your laptop (Win10/MS Edge), then I’d bet the font did’t load on the other windows 10 computer. It may have just been a temporary internet or server issue, or something could have blocked the request.
If you’d like to post a link to the site, we can take a look to make sure it’s loading on our computers.
www.nefariousmusic.com
Looks as I’d expect on safari on my Mac and google chrome on a work PC in MS edge however most of the text appears in times new roman. The home page is ok but the others are changed.
Jim, I took a look in my Win10 VM and it looked fine on all pages in Edge. However, on all pages except the home page in IE11 the font was just a built-in serif font, which is the fallback style in the CSS file. Are you sure you are seeing it in Edge? Maybe you were in IE?
I’ll check a couple of my real Win10 computers when I have a chance. It will probably be tomorrow.
If you do confirm seeing it in IE, you may want to reach out to the theme developer and see what they say.
I wouldn’t necessarily trust a theme developer to take the holistic view. Some developers are Mac Centric and take a fingers up approach to Microsoft. Others take the view that only recent browsers need supporting. You’ll find stacks that don’t behave on IE or Edge and it is frustrating even though the real frustration is Microsoft’s refusal to accept the web standards everyone else accepts. The reality with web development is that we need to be widely compatible because we don’t dictate what technology end-users use and neither can we expect them to be interested in the disputes behind the scenes. So use web friendly fonts if a theme-provided font doesn’t work in Edge
You could also go down the route of getting Joe Workman’s Font Pro (might be a little bit expensive and overkill for your needs as it can do a lot of customisation) or InStacks’s CustomFont Stack (which is free).
Both of these stacks will ensure that the custom font you select (you will need font files and Google font is great free resource for this) is downloaded and displayed for your site, so all browsers should render the correct font and not any fall back font options.
Thanks everyone for your advice, I’ll check all this out. At least now I have a little more idea what I’m looking at. I’ll investigate all the options you’ve suggested.
Cheers. Jim
Jim, I took a look on another Win10 computer. On that one Edge and IE both display the font correctly on the home page and incorrectly on the other pages. It’s really odd. Nothing jumps out as obviously incorrect.
Windows 10: 1803
Edge: 42.17134.1.0
I would definitely contact the theme developer. MS Edge (while going away) is still current.
Just taking a quick look at the page(s) in question. Seems like every bit of text is marked as a heading (h1, h2, h3, etc). Looks as though you have been using the headings for styling, that’s not really good practice. I also a ton of spans that have font style statements most appear to have line breaks in them, but also have font sizes and family.
I ran the e-editions page (http://www.nefariousmusic.com/page/) through an HTML syntax checker and it has errors. some have heading tags within <span>'s.
Browsers try there best to render pages with syntax errors, but can often not get the expected or same results as other browsers.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.