I have an issue in Chrome only when developer tools is closed.
Basically as you can see from above the icons which are a custom font on occasion don't output at all.
For those who can't see the image the icons which are being output via css :before content are being output as, for-example ï…ˆ instead of the icon.
Below is an example of the css output:
.blog_module #page_content .social_buttons ul li.facebook a:before, .blog_module #pre_content .social_buttons ul li.facebook a:before {
content: "ï„";
font-family: 'icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I know the content is ï„ personally I'm not sure why fontcustom outputs it in this way but 9/10 it works.
I thought it might be character encoding? but why does it only happen occasionally?
Does anyone know what this is and how to fix it?
I also thought it might not be downloading in time but wouldn't it then change once the font has downloaded? That's what usually happens...
Any thoughts, suggestions or answers and I'll be extremely grateful!
Sounds like you have some good suggestions, but the answer I would give you, would be - don't use icon fonts.
If you checkout fontastic.me - there is an option to output SVG icon sprites instead.
It is much more cross-compatible - and a pleasure to work with.
"SVG seems to just work (when supported). Icon fonts seem to fail in weird ways. For instance, you map the characters to normal letters, then the font loading fails and you get random characters abound. Or you map to "Private Use Area" and some browsers decide to re-map them to really weird characters like roses, but it's hard to replicate. Or you want to host the #font-face files on a CDN, but that's cross-origin and Firefox hates that, so you need your server to serve the right cross-origin headers, but your Nginx setup isn't picking that up right, SIGH." - Chris Coyier
article here: http://css-tricks.com/svg-sprites-use-better-icon-fonts/
and another good break down from Ian Feather: http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/
If you get a little snippet going, these are really quick to implement.
The icon fonts just have too many anomalies to account for.
Related
I'm going mad with an issue and I wonder if anyone can help. I'm currently using http://font-combinator.com to see what different style of fonts look like together. This website simply loads fonts in from Google Fonts and displays them onscreen.
Now I choose a font, think it looks ok, and head over to Google and download it. I then paste that font into my local font directory so I can see what it looks like locally, and add it's name in my css like so:
font: 100%/1.6 "Font name here";
color: #bbb;
font-weight: 400; (for example)
Problem is when I look at it in the same browser as I did the Font Combinator, it looks rougher and more jagged. No settings have been changed. The font on both sites is 16px. For reference I am using Windows XP with cleartype turned off (I don't like it).
Now if I link to Google Fonts directly through my website, then it displays the same as on the Font Combinator. I don't understand how installing the same font that Google uses produces a different result? Ideally I would like to host the font on my website myself, but can't see a way around this? Am I doing something wrong, or is there something I've missed? Thanks!
For reference I am using the following reset:
html,body,etc.... {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style-type: none;
font-size: 100%;
}
Edit: #Fontface code that I've used, that does seem to look the same!
#font-face {
font-family: 'Molengo';
src: url('./fonts/Molengo-Regular.ttf')
format('truetype');
}
(just picked this font as an example)
I had same problem and it's a mess and hard to solve. The main problem is that the font you've downloaded is not actually the "same" that google webfonts provides.
The font family is the same, but Google can provide it in different formats. The font that you've installed on your system is probably a .ttf file, that's a truetype font and Windows can use it. But, if you look the css that Google serves you when you includes a font, it's something like this:
For this:
http://fonts.googleapis.com/css?family=Open+Sans
you get this:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
As you can see, if there is no local matching, it requests the font BUT in woff format, it's the same font but in another font format. In fact, I've done this example using chrome, but the css that google provides choose the best font format depending on browser and SO that made the request.
That's the reason why you see same font family rendering so different, the local one is .ttf, the another could be woff, svg (I think for IE), and there is other posibilities. And same font on different formats looks different, sometimes too much different.
I think the best choice is to create that css by yourself, not asking it to Google, and remove the local part, but it's important to add the other formats, other way it will not work on all supported browser.
This is potentially a duplicate of this question but this was my answer to that:
Fonts render differently based on:
Screen/Monitor resolution
Browser
Operating System
Size of use and hinting
Without seeing your code the only things I can recommend are:
Making sure you are using decent reset css (something like this: http://meyerweb.com/eric/tools/css/reset/).
Try adding font-weight: normal; to fonts to see if this makes a difference; sometimes browsers and frameworks try adding a fake bold to things.
Assuring you are using the actual versions of the fonts and not just applying CSS styles.
If all else fails then try bumping the font-size up/down a small amount and see if the font hints better at these sizes.
Some people also recommend not using the #import or direct link from google. Perhaps try downloading the file and using #font-face in your css.
Hope this helps!
EDIT:
If you’re hosting the font yourself — double check the #font-face call. Make sure you are calling all versions possible of the typeface. Also, Some browsers prefer certain formats being called earlier.
Let me give you some examples:
Firefox 13:
Chrome (latest):
As you can see, in Firefox the font appears smoother, and in Chrome choppier. I'm curious as to why this is happening and steps I can take to even out the experience for my users.
I'm using an .otf font:
HelveticaNeueLTPro-LtCn.otf
And using the following CSS rules to apply this custom font:
#font-face {
font-family: "Helvetica Neue LTPro";
src: url("/Public/assets/fonts/HelveticaNeueLTPro-LtCn.otf");
}
a {
color: #665548;
display: block;
font-family: "Helvetica Neue LTPro";
font-size: 15px;
padding: 17px;
}
What do you recommend I use to even out the font differences? Or better yet, what's a good practice way to use "Web safe" fonts? Does such a thing exist?
Unfortunately you can't just take any font, convert it and have it work well in all browsers. I'd love it if you could but you can't.
Your best bet for getting good results is to use a font delivery service such as typekit or fontdeck that provide fonts that have been designed for delivery across browsers and so have a better chance of rendering consistently. You're still likely to get small variations across browsers and operating systems though, that's the nature of the web.
But in answer to your question specifically, there are no settings or workarounds to make that font appear consistently. For what it's worth I think they both look fine.
That's just depending on how a browser interprets the font. I've never actually used it, but there's a site called fontsquirrel that will take a font and break it up into different font extensions to be used for different browsers. Check it out. http://www.fontsquirrel.com/
I have a problem with Arial (maybe other fonts too) in Chrome/Chromium.
It looks good when I use font-family: Arial;
But when I include Arial font-file via #font-face it looks different!
Why could it be? What can I do to make them look the same? Where exactly Chrome takes its fonts?
Here is my css
#font-face {
font-family: 'My Arial';
src: url(Arial.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
body {
padding: 20px;
font-size: 16px;
}
body#native {
font-family: Arial;
}
body#fontface {
font-family: 'My Arial';
}
Here is the rendered text:
.
Sorry for my English, it's not my native language.
I use #font-face a lot, and there's always a difference in how different browsers render it. With some fonts it gets really ugly, in your particular case, I'd say difference is insignificant, and everything else just as Sparky672 already commented.
If you absolutely must have pixel-precise identical rendering on all systems, maybe some javascript based solution may help, check this:
https://stackoverflow.com/a/692994/525445
Again, if this was my site on your screenshots, I'd be perfectly happy with how it looks.
It's just the nature of the web that not everyone will see the identical thing, there are different monitors with different color settings, different resolutions, some people zoom in the text etc.
Just to mention the option, you can detect Chrome with JavaScript and then apply some specific CSS to tweak it.
Is the Arial file you're including with #font-face the same exact file from your system or did you get it from somewhere else? There could be difference in the files that's causing the difference. If not, then as #Sparky672 said in his last comment, there's not much you can do, it's just a browser rendering issue.
Also, out of curiosity, why are you including Arial with #font-face, since it's available on virtually every system?
I used Google web fonts for my H1 text and the text looks very pixelated on my screen.
<link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet' type='text/css'>
<style media="screen" type="text/css">
h1 {
color:#544E4F;
font-family: 'Forum', cursive;
text-align:center;
margin: auto;
font-size:210%;
}
</style>
Thanks in advance!
After suffering the same problem for a long time, and after doing a lot of research about it, I finally did the following:
I found http://www.fontsquirrel.com
I downloaded the (pixellated) font I was using (Exo family)
I uploaded it to my site
I referenced it locally to avoid using Google Fonts (you can achieve this by downloading a #font-face Kit that is available at fontsquirrel.com also).
It looks OK to me. However note that h1 receives the style:
font-weight: bold;
in most browsers' default style sheets. Since you only have a normal-weight variant of the font available, the browser has to synthesise the bold weight automatically from the normal. There are various different methods of auto-bolding of varying levels of quality, but it's never going to look as good as a real designed bold. Maybe you are getting a poorly-synthesised font variant.
If you want to use Forum for headings I suggest adding the rule:
font-weight: normal;
which will allow the browser to use the regular, unmolested font. Alternatively if you really do want that bold, best choose a different font that does actually have a bold weight.
Another possibility is that you've got anti-aliasing turned off at a system level, and it's being overridden for your normal browser font but not for web fonts. If that's the problem then you could try to override for everything else using eg:
font-smooth: always;
-webkit-font-smoothing: antialiased;
although it's questionable whether it's really a good idea to be ignoring the user's preferences, and also arguable whether it should be subpixel-antialiased instead for WebKit...
Well I'm just throwing these out there, but..
My best guess is to use em rather than % for your font size. Such as, font-size:4.5em.
Maybe try using a div instead of h1, though I doubt that would do much of anything.
Try adding this:
h1 {
text-shadow:0 0 1px transparent;
}
I have two browsers both running in Ubuntu 10.
Firefox 4 RC and Google Chrome 10. Both have very different representation of bold text. Please, see screenshot below - Chrome on top, Firefox below
Same browsers in Windows and in Mac OSx show no differences or at least very minor ones.
To rule out any CSS incompatibilities, I checked both styles applied and calculated values for font-weight, size, letter spacing and line height. They all match.
Strange enough text (including this one) that is not bold look exactly the same.
The font used is Monotype Corsiva, it is attached as web font. Other fonts do not have this problem.
My question is how do web browsers generate bold text? Why is that dependent on font used and how to work around it? Using other font is not an option, unfortunately.
EDIT: This is the CSS that apply to the text as requested:
text-align: right;
font-size: 110%;
font-weight: bold;
font-style: normal;
white-space: nowrap;
font-family: "Monotype Corsiva","mntcrsweb",sans-serif;
letter-spacing: 0.02em;
line-height: 100%;
text-shadow: -0.1em -0.06em 0.2em #000000;
font-size: 180%;
direction: ltr;
font-size: 10px;
line-height: 125%;
A bold font would be a separate font file, not included in the main font (at least, not for TTF and OTF formats).
Monotype Corsiva does not have a bold variant, so if you try to embolden it, the operating system and/or the browser tries to fake it, with varying (but always less than ideal) results.
Short answer: don't do that.
Cheers,
Thomas
Just remembered another possible reason for your problem. Fonts can include a BOLD version inside the font. Some browsers and OS uses this others generates the bold themselfs. This could be your problem here. The font might have the bold or oppersite. Havent tested it myself, but that could be the problem.
Alternative go for some of the opensource/free webfonts from Google etc.
what happends if you go away from % and em units? use the "faulty px" instead? do they align then? I dont say that you shouldn't use % or em, but does px units produce the same problem?
If it does, I think its time to forget that perticular font for the task. Sounds buggy to me.
Ofcause as you mention, browsers and OS versions renders fonts differently - eg. cleartype on Windows etc. But they ought to be more or less alike anyways.
If I were in your situation, I would first apply 1 css style, check on all browsers. Then apply the next until the look breaks. Debugging starts from bottom. :o)