After going crazy trying to figure out why font-feature-settings: "lnum" 1 was having no effect when it is supported and well documented, it seems that Safari might be to blame.
Seeing failure in both Safari 11.1.2 and 12.0.2 on macOS, and 12 on iOS.
I'm interested to hear of any others seeing this and on what versions. Can check if you see lining numerals on this pen.
Other font-feature-settings do seem seem to be working in Safari.
The version of Raleway in Google Fonts does not include the lining numerals feature.
It appears that Chrome may be using a built-in copy of Raleway; at least network inspector doesn't show it actually loading remote font files. Perhaps that's why the pen works on Chrome but not on Safari.
The solution, then, is to use a copy of Raleway that actually includes the lining numerals feature.
Related
http://img31.imageshack.us/img31/6730/4x1f.png
This is an example of the pixelated text when I set the font size to anything other than 80 or 65. Would anybody happen to know why the text gets pixelated like this?
Code to replicate this issue:
<div class="top_text">Hello! Please check back some other time, this website is in development.</div>
.top_text{
font-family: "Arial Black";
font-size: 38px;
}
Browser: Google Chrome
OS: Windows 8
It looks aliased, I would rather it be antialiased.
Google Chrome currently uses a really old text-rendering method, GDI, on Windows. Source. Firefox, IE (and most other applications you run) use ClearType, which has lots of features (like font hinting) which make text look more "anti-aliased".
Chrome devs are supposedly fixing it; if you believe the above link, the fix is due to be released soon. For now, however, most fonts will look badly-aliased in Chrome, except at specific font sizes.
Im using the 'Lato' font from google web fonts, and its displaying fine on all browsers apart from safari.
Im using it in font-weight:100;
here are some screen shots of the different browsers. Any idea what might be causing it to render extremely thin ? Or if theres a way i can set it to render in font-weight:300; for safari only ?
Ive also made a js fiddle of the problem - http://jsfiddle.net/qLHuc/1/
FIREFOX
CHROME
SAFARI
I'm not sure why, but Safari is disabling subpixel antialising at small font sizes on that page. You can fix it by applying -webkit-font-smoothing: subpixel-antialiased. See here: http://jsfiddle.net/qLHuc/3/
However, I think you should consider using a heavier font. Have you tested this on Windows? It will likely look very, very light. OSX renders text very heavily when subpixel antialiasing is enabled, and especially heavily when text is against a dark or colored background. What you see in your Safari screenshot is similar to what people who aren't on OSX will see.
I also faced similar issue, when I tried to use google fonts with font-weight:300 - its working fine in all browsers except safari.
I resolved this by adding below css property.
-webkit-font-smoothing: antialiased;
I was running into a similar issue that appeared exactly the same. I was using the CSS font-weight: lighter; while using this google font link:
http://fonts.googleapis.com/css?family=Lato:300,400
Somehow it was displaying as 100 weight! So, I now explicitly use the font-weight:300; to get what I want. I'm not sure, but I believe this likely has something to do with me having the font on my system, and google suggesting my computer uses the system font before downloading it again... Wouldn't have figured it out without this Q and A, thanks!
Does any one know why some of my font families won't render on some mobile devices? Here's a page that demonstrates the fonts:
http://jl.evermight.com/font/
The fonts render properly on desktop chrome browser, ipad and iphone.
But when i view that page on my galaxy note, the Have A Nice Day font renders as something that looks like arial. On my friends nexus 4, Have a nice day works fine, but the universe condense renders as something that looks like arial.
Does anyone know why?
I've attached screenshot of what the fonts should look like
Additional notes
some people claim Have a nice day is not working in Firefox or IE10. For me, the font works on Firefox. I don't have IE10, so unable to verify.
How do I make this font work on my android?
Additional Notes
I had a typing mistake in my link path to my css files. I've corrected it now. But the problem still appears in my droid browser.
Just tried out the link on my phone - HTC 8s, everything seemed to work fine. Below is the screenshot for the same.
ON HTC 8S
ON IE 10
It's possible it's a downloading issue. The fonts listed in your declaration should work across most browsers (just make sure you're not in Opera Mini, it doesn't really support much of anything).
Additionally, Have a Nice Day is loaded through #font-face declarations in the CSS file, but the others appear to be loaded from the JavaScript, which might be part of the issue. Droid Sans is on Android phones by default, so they're likely just pulling them locally, which is why they work across the board on Android. From there, it might be a difference of JavaScript support (if Universe doesn't work, JS isn't turned on, for example).
Another thing that might help is opening up developer tools in a desktop browser that isn't working (in the case of Firefox, you'll want to pick up the Firebug extension). Check the "Net" or "Network" tab and see if your font files are getting downloaded.
If that still doesn't work, try playing around with the order of the font files in the declaration. I've seen browsers take issue with the order.
Also, the Droid Serif fonts are available from Google Web Fonts, which works cross browser with little headache. It might be worth seeing if your other fonts (or something close) are there, too, and just use Google's Web Font Loader to load your fonts.
The problem has been fixed. Apparently there was a bug on myfonts.com that corrupted my font files. I contacted myfonts.com and they corrected the issue right away. Then re-sent me the font files. Now everything works perfectly.
The guys at myfonts.com are amazing. Very good customer + tech support services.
Below is a link to how I do my #fontfaces for cross browser compatibility.
Cross Browser Fontface
I'm working on a tag-could style menu on a website: http://web12.leankursus.dk/
It works in chrome, (currently) has some minor problems in firefox and some larger problems in IE (9). The main problems seems to be that IE doesn't make the font as bold as Firefox and Chrome. The font need to look like it does in FF or Chrome, but I am unsure what you do when the browser just displays it diffrently
Hope you can help me.
EDIT: Screenshot of the page in IE9 and Chrome: http://i.imgur.com/1fgwX.jpg
EDIT2: Ah! I've realized I was running IE9 in compatibility mode. Turning that off fixes it in IE9. However - is there any way to make the font work in at least IE8 ?
IE8 and lower don't support .ttf files for the #font-face clause. Use .eot files for IE.
There are some problems with getting it to work in different browsers simultaneously though. Read, for instance, this.
http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
Hi,
I am wondering if there's a way to somehow force Chrome (Safari and Opera included) to render the fonts that are loaded by #font-face better? I'm not sure if it's only these two fonts, but I sincerely doubt it.
The top snapshot is the rendering of the text in Firefox 8. The one below is from Chrome(16). Now, this wouldn't bother me as much if it was rendering awfully in IE, too--but in IE it renders quite wonderfully (similary to FF).
So, I did try a few things:
Tried applying text-shadow. It made it seem a little better, but still pretty awful.
I tried using -webkit-font-smoothing: antialiased, but that didn't seem to have any effect at all.
Now, I could stop being an annoying perfectionist and simply use an image for the logo (since the smaller text doesn't render that badly, but still bad, mind you) and be done with it.
I don't really like that solution, but I will accept it if there is no other.
Thanks!
https://stackoverflow.com/a/9041280/1112665
If your code is from font squirrel it may be as simple as just rearranging the order of some of your css.
I'm seeing almost the exact opposite on OS X. Chrome, Safari are fine and Firefox isn't displaying right.
Chrome 18.0.1003.1 dev:
Safari 5.1.2 (7534.52.7):
Firefox 9.0.1:
Opera 11.60 Build 1185:
Internet Explorer 9.0.8112 (under Parallels VM):
It looks like Windows 7 #font-face problems are quite common, and there are a lot of inconsistencies in general:
#Font-Face Windows Woes (flynsarmy.com - 2010/05/29)
#font-face gotchas (http://paulirish.com/ - 2010/05/05 )
Font-face embedded fonts look fuzzy in Windows 7 browsers
#font-face rendering in Windows 7
You can also ensure the SVG format is being used primarily. The upshot to this is the font will render perfectly in Opera/Chrome, the down side is that I have found line-height issues arise.
Use a chrome specific media query and replace the font with the SVG version exclusively.