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.
Related
Regular fonts look normal, but large fonts look jagged in Chrome (not in Safari or Firefox). I'm using a Macbook Pro running Mojave.
Example codepen
.large {
font-size: 300px
font-weight: bold
}
Chrome
Safari
Firefox
I've tried the recommendations in this SO post (enable-font-cache-scaling and accelerated 2D Canvas), but the issue remains.
Turning chrome://settings "Use hardware acceleration when available" OFF fixed it for me.
At first I was not able to reproduce the jagginess/blockiness, but I realized I was looking at it on MacOS [High] Sierra, and you specified Mojave. So I tried it there, and it is absolutely awful. I'm really surprised this escaped anyone's notice in testing. I'd imagine there will be an update to either Chrome or Mojave that addresses this soon.
I guess this is actually related to a change to the OS defaults; Apple apparently disabled sub-pixel font rendering in Mojave and passed it off as a "refinement". Sub-pixel rendering is handled by the GPU, hence disabling GPU rendering in Chrome "fixes" it. I guess you could also use the defaults write technique specified in the link I mentioned.
In any case: this is probably not something you can address in your CSS code, since it is related to user-local/machine settings.
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 found an open font I liked (Crete Round) and designed some screens in Photoshop with it. When it came time to set up the CSS, I tried using both Google Fonts and fontsquirrel.com's downloadable "kit" (a zip file with four different types of fonts and a ready-made stylesheet), but both gave me strange results on Mac.
Photoshop — What I want it to look like:
Yuck — Chrome (and Safari) on Mac using an #font-face kit from fontsquirrel.com:
Chrome (and Safari) on Mac using Google Fonts (basically identical):
GOOD —Chrome on Windows (fontsquirrel):
GOOD — Hack. I found out that with any opacity (not text color alpha) less than 1.0, Chrome gave me good results (but Safari was still bad.)
Chrome on Mac using fontsquirrel, with opacity:0.999;:
Does anyone have any ideas on what is going on here, or what I might be doing wrong?
I don't think you are doing anything wrong. I also don't think there is a way around it, other than to use images instead of text where the style is absolutely crucial.
I found THIS LINK which discusses rendering engines on different operating systems (also taking different browsers into consideration).
I hope this helps!
try
html { -webkit-font-smoothing: antialiased; }
I'm not sure if this has anything to do with the recent Safari update, but I'm beginning to notice this a lot. There is a drastic difference in the way each browser is rendering fonts.
for instance, I took screenshots of what I am seeing here on stackoverflow...
http://twitpic.com/q43eh
I have verified that this is a trend via my co-workers machines.
has anyone noticed this or have any thoughts on non-hack solutions?
Font rendering isn't specified anywhere in the standards and therefore may (and will) vary between browsers and platforms.
In particular, Safari on Windows renders fonts like OS X does which tends to look weird to Windows users as Windows has quite a different take on how to render fonts than OS X.
You can definitely notice this, especially if you use Expression Web SuperPreview. This is just a general problem of the web, just like folks can hit Ctrl-+ and make your text bigger. Try not to use many absolute coordinates in CSS and the layout engine will ensure it's still readable
I first noticed this in OSX in October 2010. It is especially noticeable with Helvetica Neue. I suspect that an OSX update broke font anti-aliasing in font sizes above 12 pixels. I've posted an Apple Support message here.
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.