Off the back of this post (CSS3 #font-face not displaying on Mac OS X Safari 5.x OR Chrome) I have come across a new stumbling block. It all seemed to be fixed at first but then I encountered a new problem that I couldn't select any text.
On Firefox in Mac OS X, I cannot highlight any text or even click on any hyperlinks that is using the font-face font.
It is selectable on all other operating systems (including Windows, iOS etc.) and other Mac OS X browsers (like Chrome and Safari).
Try it out on http://gradtouch.com/test
Here's the current CSS code.
#font-face {
font-family: 'Avenir LT 55 Roman';
src: url('fonts/avenir-55.eot?#iefix') format('embedded-opentype'),
url('fonts/avenir-55.woff') format('woff'),
url('fonts/avenir-55.ttf') format('truetype'),
url('fonts/avenir-55.svg#AvenirLT-Roman') format('svg');
font-weight: normal;
font-style: normal;
}
Any ideas or solutions?
Thanks in advance.
At first glance, I would guess something is wrong with the metrics in that font. If I create a <span> containing some of your text and give it a border to see how tall it is, that <span> ends up 0px tall.
Once that happens, selection will be invisible, since it's drawn to the height of the text...
Related
I have a font face on my site and the text comes out very rough on window chrome only.
I have done the following tweaks:
- made SVG first, tried adding a text shadow, tried antialiased font smoothing.
#font-face {
font-family:'grl';
src: url('../fonts/gotham-rounded-light_21020.eot');
src: url('../fonts/gotham-rounded-light_21020.eot?iefix') format('eot'), url('../fonts/gotham-rounded-light_21020.svg#webfontZam02nTh') format('svg'), url('../fonts/gotham-rounded-light_21020.woff') format('woff'), url('../fonts/gotham-rounded-light_21020.ttf') format('truetype');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
font-smooth: always;
}
here's the url
http://thunder.beresponsive.net/meet-the-kids.html
There is no way currently to fix this.
In some cases, adding CSS text-shadow helps. If it doesn't help, then you quite simply need to use a different font.
Google is aware of this issue, but they don't really care.
I think that you need to specify the font-weight in a number value, i.e. font-weight:200 rather than just "normal".
I'm struggling to see why a nice clean / simple font like Open Sans Light doesn't look right in Firefox, but looks fine in Chrome and Safari. I guess even Chrome and Safari have some slight differences, but for the most part they look the same in those browsers.
http://503rephotography.com/_font/testfont.html - try and look at it in Firefox and then Chrome or Safari, and you will see what I mean...not sure what it looks like in IE and don't really care all that much to be honest... :) but the font in Firefox is kinda heavy and not quite the right shape, where it should be lighter and better looking. And it's not just this font, it's pretty much every font other than the basics like Arial or Verdana.
CSS
h1 {
font-size:2em;
font-family:OpenSansLight;
color:#000;
}
#font-face {
font-family: 'OpenSansLight';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
HTML
<h1 align="center">Test... Open Sans Light</h1>
I looked around for an answer and most of the issues were just with a specific font, but I don't think that's the case here, as it applies to all of the ones I've tried, and I know they can look good in Firefox from viewing other sites.
Lots of sites use these fonts and look identical across browsers, are they using something like Adobe typekit in order to do this..? For a lot of these I've got the web font kit off fontsquirrel.com and it seems to work fine other than the inconsistencies. Any input is much appreciated...thanks!
All you need to do is to reset the h1 default weight, or include a bold version of the font.
h1 { font-weight: normal; }
The problem here is that h1 and other headline tags have font-weight: bold set as default. And since you've set the fonts font-weight propery to normal and there is no available bold font the browser, the browser will attempt to create a faux-bold version of your font. Which pretty much always ends up looking horrible.
Firefox seems to mess up fonts the most - on the other hand the text looks bold. Chrome and Safari doesn't alter fonts nearly as much, making them look sharper but not really bold at all. Just look at your sample - it's not very obvious that the text is bold.
A good article on the issue here: http://alistapart.com/article/say-no-to-faux-bold
I have generated font-face files for the font "formata" using fontsquirrel. On my Mac the font looks good in both Chrome and Safari (which seems logic since both use Webkit). It renders fine on Android (Chrome) and the iPad (Safari) as well.
In Windows, however, the font renders really weird. Some letters look like they have a padding-bottom of 1px. Some letters also seem like they are one pixel to small on the height.
I have tried to turn of ClearType, but it still is the same. The browser doesn't seem to matter.
Below is screenshot of how i looks like:
Try adjusting the font size. Some custom fonts on Windows don't work well at specific font sizes. Experiment with a few different sizes.
An example that works for me:
#font-face {
font-family: 'PaddingtonSCPlainSmallCapsRom';
src: url('/assets/fonts/paddingtonsc-webfont.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/paddingtonsc-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/assets/fonts/paddingtonsc-webfont.woff') format('woff'), /* Modern Browsers */
url('/assets/fonts/paddingtonsc-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('/assets/fonts/paddingtonsc-webfont.svg#webfontCykG2Qou') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
/* font-variant: normal; don't include this since webkit will ignore the whole rule: https://bugs.webkit.org/show_bug.cgi?id=25000 */
}
body {
font: normal 75%/1.5em PaddingtonSCPlainSmallCapsRom, Arial, sans-serif;
}
We've just released a new website (http://www.vulytrampolines.com/), and we're having issues with font-face calls on Mac Safari/Chrome only. It will load as the proper font in the first half second or so (in the navigation at the top), but then when the video loads within the iframe, the font breaks. It goes much lighter/thinner than normal, and we can't figure out how to fix it.
The issue only appears to occur when a page has an iframe to a youtube/vimeo video. E.G. http://vulytrampolines.com/aboutus. If you watch the orange navigation, you'll notice the font will have a bit more weight, but will then go lighter once the youtube video loads in. Deleting the video iframe from the DOM or setting it to display none then fixes the problem, BUT making it visible again breaks the font again.
Anyone have any ideas?
webkit-smoothing, font smoothing, rotation, text-shadows haven't fixed it.
This is our font-face call:
#font-face {
/* font-family: neuzeitGroteskLight;*/
font-family: VulyFont-Light;
src: url(/css/fonts/neuzeitgro-lig-webfont.eot);
src: url('/css/fonts/neuzeitgro-lig-webfont.eot?#iefix') format('embedded-opentype'),
url(/css/fonts/neuzeitgro-lig-webfont.woff) format('woff'),
url(/css/fonts/neuzeitgro-lig-webfont.ttf) format('truetype'),
url(/css/fonts/neuzeitgro-lig-webfont.svg#NeuzeitGroteskLight) format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
#font-face {
/* font-family: 'neuzeitGroteskRegular';*/
font-family: VulyFont;
src: url(/css/fonts/neuzeitgro-reg-webfont.eot);
src: url('/css/fonts/neuzeitgro-reg-webfont.eot?#iefix') format('embedded-opentype'),
url(/css/fonts/neuzeitgro-reg-webfont.woff) format('woff'),
url(/css/fonts/neuzeitgro-reg-webfont.ttf) format('truetype'),
url(/css/fonts/neuzeitgro-reg-webfont.svg#NeuzeitGroteskRegular) format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
#font-face {
/* font-family: 'neuzeitGroteskBold';*/
font-family: VulyFont-Bold;
src: url(/css/fonts/neuzeitgro-bol-webfont.eot);
src: url('/css/fonts/neuzeitgro-bol-webfont.eot?#iefix') format('embedded-opentype'),
url(/css/fonts/neuzeitgro-bol-webfont.woff) format('woff'),
url(/css/fonts/neuzeitgro-bol-webfont.ttf) format('truetype'),
url(/css/fonts/neuzeitgro-bol-webfont.svg#NeuzeitGroteskBold) format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
I spent a few hours investigating today.
Mac and PC render the same font family/weight/style differently for this particular font.
A) Mac and PC firefox have no issues rendering the font.
A) PC Chrome and PC Safari have no issues rendering the font.
B) Mac Chrome, Mac Safari, iPad and iPhone have issues rendering the font, when a video is either loaded or is playing on a page.
Solution:
We have two versions of the font - a light font and a regular font.
For options A) above, we now use VulyFont-Light, as there are no issues with the font becoming lighter.
For option B) above we use VulyFont with -webkit-font-smoothing: antialiased !important; (I'm not 100% if the !important is necessary). The effect of font-smoothing is that it PREVENTS the font-face from re-rendering or getting lighter/breaking when a video is loaded or starts playing. So we have it rendering almost exactly the same cross-browser/platform. The only difference is minor glyph spacings between the two versions of the font.
I have implemented a font in css with #font-face, and its looking way fatter when loaded in Safari. Does anybody know what can cause this?
#font-face {
font-family: 'SerifaBold';
src: url('/css/serifbol-webfont.eot');
src: url('/css/serifbol-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/serifbol-webfont.woff') format('woff'),
url('/css/serifbol-webfont.ttf') format('truetype'),
url('/css/serifbol-webfont.svg#SerifaBold') format('svg');
font-weight: 100;
font-style: normal;
}
Your font-face rule is telling the browser that this is an ultralight font (the font-weight: 100 part). Then you're presumably asking the browser to use this font for text that has normal weight (font-weight: 400) or is bold (font-weight: 700). The browser sees that it's got an ultralight font (because you told it so) and needs a normal font, and it does what's called "synthetic bolding": artificially making the letters bolder by drawing them several times with a slight offset.
There is no standard for synthetic bold, and the default behaviors of browsers differ.
If you're trying to use this font for bold text, and it's already a bold face, you should say so in your font-face rule, using the font-weight descriptor.
When using web typefaces with "font variations" including different weights and/or italics included in the font family, always apply "font-style: normal" & font-weight: 400; (or font-weight:normal) to each style declaration. Make sure to explicitly declare each font-family differently for each variation:
EG: I'm using Helvatica Neue from fonts.com
strong, b {
font-family:'HelveticaNeueW01-75Bold', 'Arial Black', Arial, sans-serif;
font-weight: 400;
}
em, i {
font-family: 'HelveticaNeueW01-56It', Arial, sans-serif;
font-style: normal;
}
Firefox will "help out" your fonts by faux-bolding & faux-italicizing your nice #font-face type making them really ugly and ruining all the hard work the designer did in creating the fonts.
This applies to all sources of fonts including typekit, google, fonts.com and locally hosted fonts.
I've found the same thing happens. Its almost as if its an entire weight above what it should be. Maybe try with the non-bold version of the font as a starting point?
The same problem on my client's website had driven me crazy, but I finally found the problem. When you call 'SerifaBold' in any of your CSS class, make sure that you also put font-weight: normal;
That finally solved the problem for me.