Im currently building a website and it seems that the font used in the header isnt rendering correctly on windows machines. I've checked the windows machines have cleartype enabled which they do so im wondering if anybody else has come across this issue or knows what the cause is?
Windows...
OSX...
It seems that particular font has not been properly hinted, and that causes numbers to have uneven sizes with the Windows ClearType (mis)renderer.
You can try to fix the issue with the FreeType’s ttfautohint tool.
There are a lot of reasons why fonts render differently from OS to OS and browser to browser. This SixRevisions article discusses some of the challenges using custom fonts online and towards the end there is a section on font rendering. It's a jungle out there.
Related
I have got a website running with the Google Fonts Rubik for ages. This morning it appears that this font is not rendering anymore on my desktop (Chrome, Firefox, Opera) and several others, coming up fine on my Smartphone. I switched to Roboto for the time being.
Any idea ?
This http://www.mejoresdatos.cl/FontIssue.aspx shows what shown below:
Same problem here it only happens on Windows 7 Machines no matter the browser. OSX and all mobile devices I have tested on it is working on.
https://fonts.google.com/?query=Rubik. See this is not even working here. Temporarily you can try embedding the font through CSS. Till google solves this.
I had the same issue, what worked for me was simply to force a new fetch rather than rely on the cache.
i.e. I added the parameter &cache=clear to the font.googleapis.com URL:
#import 'https://fonts.googleapis.com/css?family=Rubik:400,500,700,900&cache=clear';
So this is a problem I have on a site I'm developing, but I included a screenshot from the Google Fonts web site, because it's public and everyone can look at it and it's also clear it's not something specific to my code.
The screenshot was taken on a Windows 7 virtual machine running IE9. It's the virtual machine from https://dev.modern.ie, so there shouldn't be anything special about it either.
And finally, this is the Fira Sans font, but this same issue has happened to me before with the Lato font on another (Windows) machine, so it shouldn't be the font either.
If you open the page — https://www.google.com/fonts/specimen/Fira+Sans — it will probably look just fine on your machine, as it does on mine. I can only reproduce it on the VM.
Here's how it looks in IE9:
In Chrome all glyphs are missing, so all of the text that is using the font is not rendered at all.
In Firefox the rendering is a little ugly, somewhat pixelated, but at least all of the glyphs are there and it's almost alright.
I tried deleting C:\Windows\System32\FNTCACHE.DAT and some font-related .dat file in
C:\Windows\ServiceProfiles\LocalService\Appdata\Local, but it made no difference.
At this point I have absolutely no idea what's going on. Do you have any idea what might be causing this? Any help is much appreciated.
I've been having an issue with a client's site that I haven't been able to replicate. A few users have reported an issue with the website (http://beyondbbd.com) where the pages don't display a majority of the styling and render as below:
In trying to troubleshoot, I am having difficulty replicating the issue on my browser checking system (Browserstack), or finding an underlying cause.
Users reporting the issue are using Windows 7 and Internet explorer (though I don't know their version of IE at this time), and are encountering the issue on these pages, among others:
http://beyondbbd.com/motivational-speakers-for-business/
http://beyondbbd.com/leadership-workshops/
http://beyondbbd.com/internal-coach-training-program/
I haven't been able to replicate on any version of Windows or IE using Browserstack, but this issue has been reported by more than one user so I don't think it's an isolated case.
Anyone have any ideas as to what the cause could be, or how I could replicate the bug?
Thanks in advance!
-Nick
I couldn't replicate, but you have two opening 'head' tags as well as lots of other validation errors (stray closing tags). It is possible that this is chocking some instances of IE.
I am studying CSS3 and HTML5 and trying to develop a simple homepage. Since I have only Mac interface in my house so I couldn't check any differences on windows.
But one day, one of my acquaintances told me that there is a pixel difference between browsers which I didn't know at all. Then I checked my page and it appeared to be wrong.
Even though it was same resolution as I set, Chrome on Mac showed me an appropriate position of several buttons but Chrome on Windows didn't.
Their position was quite different and ruined the design. How can I fix this problem? or is it normal?
Thanks.
Developing a site that is the same on every combination of operating system and browser is no easy task. It has personally added many hours to my development time trying to fix the issues.
There are several tools out there that try to help you with this task, such as Cross Browser Testing. Or you can manually test it by installing the browsers on your machine. It is also common to use virtual machines to test your website on other platforms. VMware is popular.
Using cross browser libraries can also aid in this. Such as jQuery, which is very popular. This page lists more information on the subject, in general.
Difference is not in Chrome, but difference is in Mac and Windows.
Here, you can detect the userAgent and add the appropriate class to the body tag (with jQuery):
jQuery(document).ready(function(){
if(navigator.userAgent.indexOf('Mac') > 0){
jQuery('body').addClass('mac-os');
} else {
jQuery("body").addClass("pc");
}
});
After detecting userAgent, you can write css specially for Mac and Window and their browsers too.
In 2018 chrome and firefox behave differently depending on the operating system. I built a site recently, and on latest chrome and firefox versions one page was rendering OK in windows, while on macOS and ubuntu, it had a small glitch. The elements that are supposed to be inline were displaying horizontally in certain states.
I just set up Google Fonts API on my site. Internet Explorer, whenever I refresh the page, a default font flashes before the Google Font 'Reenie Beanie' loads. But shouldn't this be sticking in the cache or something so that once it loads once, it's there and no longer should default fonts show up?
I'm using the WebLoader version to call the fonts. I originally just used the <link> call to the fonts, but the problem there was switching to an https page - I had to use the https link, but then I think that stopped the fonts from caching too. Everything is fine in Firefox (no flashing).
Any suggestions on this?
www.n-styleid.com
Everything is working as it should (In the worst sense of the words)
This is just a problem IE is having with its rendering engine. It cannot download/retrieve the fonts and render them as fast as the basic built-in fonts that the OS has.
There really is no good way to fix this as it is not something that you broke. The best advice that I can give you is to find a font in the system that looks closest to it (Not many handwritten in the system but better than arial) and use that in your font stack.
Hope that helps.
A work around is to hide the element with css and fade it in with jquery. This will give your font time to load. Its a good idea to use a decent fallback if the content is vital.