I first saw this when I tried the IE 10 beta a while back and thought that it would be resolved in the full release. Not so. I've tried uninstalling all the way back to version IE8. The wingding buttons problem only show up when I have IE 10 installed.
About Me:
Windows 7 Ultimate 64bit
Graphics Chipset ATI Radeon HD 3800 Series
The IE 10 scrollbar and form interfaces use the "Segoe UI" font-family which includes Symbol, Regular, Bold, SemiBold. Once installed all "text-based" anomalies in the interface buttons correct themselves including the forms, and IE10 scrollbar up/down buttons.
The font is normally part of the default fonts installed in Windows 7. For some reason the beta-IE must have corrupted the font-set. Fortunately I was able to copy the fonts from another computer running windows 7.
Related
I recently bought a new 2019 iMac, 27-inch screen with the Retina 5K display. It was meant to replace my older late-2013 model which has been my workhorse for a long time.
Shortly after getting up and running with Chrome, I noticed that certain headings on websites were bolder than I remembered, and was able to figure out that it was happening with websites which used a variation of the system font stack. Specifically, if font-family was set to BlinkMacSystemFont or system-ui, headings were often no longer rendered with the correct font weight. Everything appears as if font weight was set to normal.
What's weirder is that through some fiddling around in dev tools (Codepen link) I've figured out that this only happens with font sizes at or above 20px, so there's some kind of size dependency which affects the issue. It also seems to have something to do with font smoothing, as font-weight starts working again if I set -webkit-font-smoothing: none;, but then it looks absolutely terrible. See below for a screenshot of what I mean.
I'm completely baffled by this. I've tried installing San Francisco from Apple Developer resources. I've gone to Font Book -> File -> Restore Standard Fonts, which didn't work. I've also tried both checking and unchecking 'Use font smoothing when available' in Settings -> General.
If I open up Chrome's dev tools and go to Computer -> Rendered Fonts, it says .SF NS, which I assume means it's finding San Francisco just fine, but apparently stops working above 20px.
This only happens on Chrome, and only happens on my newer iMac. My older 27-inch iMac doesn't have this display problem, or any of my other Apple devices with Catalina and Chrome. So maybe it has something to do with the 5k display? Unclear.
My Chrome version is current, as of this writing it's Version 81.0.4044.113.
Edit:
Some additional digging:
If I manually specify "SF Pro Text" or "SF Pro Display" for the font-family, it renders correctly with the right weights.
This Chromium bug report seems very relevant, which links out to a section of Apple's developer guidelines which would explain why it's changing at exactly 20px - because that's when the system tries to use SF Pro Display instead of SF Pro Text. Maybe that indicates an issue with the internally installed versions of these fonts:
Use SF Pro Text for text 19 points or smaller, and SF Pro Display for text 20 points or larger. When you use San Francisco for text in standard controls like buttons and labels, macOS automatically applies the most appropriate variant based on the point size and the user’s accessibility settings.
A related chromium bug report which describes the problem as related to kerning / tracking. It's closed, and makes no mention of font weight, but seems like the root cause might be the same.
Found the correct chromium bug. As of this writing still open but hopefully will be fixed soon: Issue 1057654
I'm using Safari for Mac on OSX El Capitan (my Mac is early 2009 so doesn't allow any ore updating).
When I visite www.mediamarkt.nl I often see question mark icons where the fonts should be. Like this:
I went inside the console and figured out it had something to do with the Geomanist font. Cause when I switch if of on various elements that show those question marks, the texts is readable again. The same when I change Geonamist to for example Arial.
On Chrome it works normally and also on Safari on OSX Sierra (which I can't install cause my Mac is old). I suspect it has something to do with the way the Geomanist font is begin coded into the website. Can someone figure out what is done wrong in this font css coding? Something that isn't quite compatible with older Safari versions?
I assume it has to do with the format of the font file Mediamarkt is serving. Their custom fonts are served in woff2 format, which all modern (evergreen) browsers support. However your older version of Safari might not, as you can see in this support table on caniuse.com, https://caniuse.com/#search=woff2.
Hope this helps.
I'm having a problem with a Wordpress based site I'm building on: In Chrome, on Windows 7, the body text on the sites' homepage is set to display as a Google Font. However the last line of the text is displaying as the default sans-serif font.
I have thought about asking about this on Wordpress.org but as the problem is confined to one browser on one OS (albeit the most commonly used browser on the most commonly used OS, natch) thought better to ask here. Have been looking all day and not seen anyone else have the same problem.
It's the latest version of Chrome and there is no problem in IE, Firefox, Opera etc. No problems (as yet...) on any other platforms at all.
There don't appear to be any problems with any other Google Fonts used in the site.
The site is currently hosted at http://best.videofeet.com
Upon inspection of the source there is no apparent reason why it would render like this.
I'm stumped.
Here's a link to an image of the problem (From VirtualBox on Mac - the only means I have available to me to replicate the bug as described by the client): http://imgur.com/XdJlCbc
OK, I'll take a stab at answering this now I've had a tinker. It looks like Josefin Sans does not have a glyph for ellipsis (…), so Chrome is swapping out that line. There are other people experiencing this with other Google fonts:
https://code.google.com/p/googlefontdirectory/issues/detail?id=204
http://wordpress.org/support/topic/a-problem-with-ellipsis-the-google-font-story
The lack of ellipsis can be tested here
Either swap the ellipsis for three periods and risk the wrath of typophiles, or change the font I'm afraid.
Before and after image showing the paragraph tag with the ellipsis removed in developer tools here:
http://i.imgur.com/RmQwlaa.jpg
I've got text on a website that is styled with the CSS rule:
font-weight:normal;
When viewing it through Chrome version 25.0.1364.99 on my local machine that is running MacOS 10.7.5 the font looks normal, but when viewing it from a different computer with the same OS version, same Chrome version, and same font set the text looks abnormally thin.
Is there something other than styling and font that could be affecting how the font is rendered in the browser??
Make sure they both have LCD font smoothing set. This can make a difference in how a font looks visually. This can affect some fonts more than others, so the system font may look the same between the two, while the one you're using may look different. Also, if one screen is much higher quality, this setting can have a more profound effect, but they still may look different (e.g. retina vs non-retina).
On 10.8 this setting is under System Preferences, General.
Check this one:
font-smoothing:antialiased;
-webkit-font-smoothing: antialiased;
text-rendering:optimizeLegibility;
It is possible that one of the operating systems has different accessibility or display options. Check out the font options under the display settings. That could be your culprit.
I've got a website that I've just uploaded onto the interwebs, and it's displaying differently using Firefox 3.0.1 on Ubuntu and WinXP.
Two things I've noticed on Ubuntu:
The favicon is missing
The background color isn't displaying (it's set in the stylesheet)
What have I done wrong? The CSS file is being fetched under Ubuntu, so why isn't it applying all of the stylesheet, just the bits it likes? And why isn't the favicon displaying? Are they the same problem?
The answer on the background color: invalid HTML. But I'd love for someone to explain why it works under Windows and not Ubuntu.
The answer on favicon: previously, there was no favicon. The browser cached the lack of favicon. Clear the Firefox cache, and all is well.
I would first suggesting getting you html and css code validated. If there are any errors in your markup, these can cause errors in the rendering.
CSS Validator
HTML Validator
I've also run into differences between FF3 on WinXP and FF3 on OS X (mostly with CSS positioning). The CSS and HTML both validated properly, but I was never able to figure out why there was this difference. I would think that the rendering engine would be the same, but apparently there are at least a few subtle differences.
I agree.. there are subtle differences between the two operating systems. Part of this is just font sizes and how line height and letter spacing is determined. So much of page flow is based on these whitespace elements interact with other page elements.
i believe this is a font issue and a browser / OS issue.
we know that different firefox versions are dependent on the OS - there are some firefox extensions available for Linux, some firefox extensions for windows are available.
it's the font I guess.
Try to download mtts core fonts (microsoft true type ) which includes all the windows fonts so that firefox can display the fonts you specified in the css.
also you could check that you use fonts which are available on both platforms. Otherwise, I suggest rechecking and revalidating your code.
The other issue could be the screen resolution. It might be okay in windows with your high resolution but not with the low resolution ubuntu version.
Almost too obvious to say, but are they both "Firefox 3.01"? One isn't, for instance, Firefox 3.01 revision 3 update 6 service pack 9 and the other, well, you get the picture.
Even if they were both the very latest Firefox for that platform, doesn't mean they're exactly the same thing.
To see what's different, enter about:config in the address bar in Firefox in both Linux and Windows, press Enter, and compare the output
Ubuntu (I believe) apply their own patches to Firefox, so maybe this cause. Having said that, I thought that the patches were only for minor, GUI-type changes.