DUPLICATE CLARIFICATION - This question relates to cross browser differences in font weights, the question highlighted as possible duplicate relates to uploading font files correctly.
I'm uploading a site onto Wordpress using a child theme of html5blank and am getting variations of font-weights across different browsers which I'm not getting with just the stand alone front-end text files.
This is what I mean on text for a hover effect -
Chrome/Safari
Firefox (this is what I want)
I've tried to use the code from the answer of this stack question
body {
-webkit-font-smoothing: subpixel-antialiased;
}
But that hasn't worked. If I use font-weight: bold; then it works for Chrome but throws out Firefox and Safari. This is the font I'm using -
#font-face {
font-family: 'Gotham-Light';
src: url('fonts/Gotham-Light.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Gotham-Light', sans-serif;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
Is there any way I can fix this? The client is a design professional and was quite specific on stuff like this. Any help appreciated.
First, you should have all of the font types associated with that typeface for cross-browser compatibility:
CSS3 Web Fonts
You can actually make them here:
Font Squirrel Webfont Generator
And sometimes you cannot control how browsers will handle different fonts. Safari will act totally different than Firefox, etc.
Lastly: It does help to use actual font WEIGHTS instead of the default "bold" and "light".
Example:
body {
font-family: 'Gotham-Light', sans-serif;
font-weight: 300;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
I hope this helps.
Related
I have an issue with trying to maintain a constant font style across all browsers. As seen below, safari's font rendering system makes the font weight smaller than the font weight of chrome's.
Safari:
Chrome:
I've tried using the solutions found on other questions though they have not solved this issue. How can I maintain a constant font style across all the major browsers? That is Chrome, Safari, Opera, Firefox and Internet Explorer.
Here is what I have tried.
-webkit-font-smoothing: antialiased;
font-weight: 800;
text-rendering: optimizeLegibility;
Browsers, by and large, have different font rendering engines/methods. For more details, I recommend reading this, this, and/or this.
Honestly, to the average user, the difference will not be all that noticeable and for the most part, pixel-perfect cross-browser display of anything has been long abandoned as a print-world aftereffect.
If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable).
Hope that helps.
A lot of the differences are more to do with the fact browsers add or omit different default weights / styles to fonts. To stop this happening make sure in your CSS you have font-weight: normal and font-style: normal in your #fontface code block.
You then need to apply the necessary styles to the HTML elements.
So if I have a font called geo-light I would do:
#font-face {font-family: 'geo-light';
src: url('fonts/geo-extralight.woff2') format('woff2'), url('fonts/geo-extralight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
And then add the specific styles for each element that uses that font.
/*SET STYLES ON ELEMENTS*/
h1, h2, h3, h3 > a, p, li {
font-family: 'geo-light', sans-serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
I hardly ever see this done on sites, and the pre-cursor to this is what is happening in your image. Those differences are not being caused by an anti-aliasing issue.
This 1st and 3rd articles in the original answer are regarding a completely different problem and the middle article that is being linked to would mean the reverse effect happening in your image examples.
The previous comment helped me a lot, thank you. I managed this way in wordpress and it works. Put this code with your font "YOUR-FONT" in to your CSS.
#font-face {
font-family: 'Conthrax';
src: url('/wp-content/uploads/fonts/conthrax-sb.eot');
src: url('/wp-content/uploads/fonts/conthrax-sb.eot') format('embedded-opentype'),
url('/wp-content/uploads/fonts/conthrax-sb-webfont.wofff') format('woff'),
url('/wp-content/uploads/fonts/conthrax-sb.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Using a combination of the following styles should result in an almost consistent rendering of a font across all browsers.
{
-webkit-font-smoothing: antialiased;
font-synthesis: none;
text-rendering: optimizeLegibility;
}
I'm testing a page in Internet Exploder 8, and I'm failing to get one of the Google hosted fonts to render the correct weight. Given the following code:
#import url(http://fonts.googleapis.com/css?family=Lato:100,400);
h1{
font-family: 'Lato-Thin', 'Lato', sans-serif;
font-size: 80px;
font-weight: 100;
}
p{
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 400;
}
The paragraph tags renders in 400 weight, but so does the heading. If I change the import line to:
#import url(http://fonts.googleapis.com/css?family=Lato:100);
The heading no longer renders in Lato, even though the 100 weight is still downloaded.
Is there a way round this?
Here's a Fiddle.
It appears that this is a compatibility issue between the way Google serves its custom fonts, and how IE8 would rather them served.
Issue 9 here: https://code.google.com/p/googlefontdirectory/issues/detail?id=9
A workaround is possible if the fonts are stored locally, but that doesn't directly address the problem described in my question.
I have problem with CSS content value. It’s not displayed at all, just codes, like in the picture. Can anyone explain what causes it? I’ll try to fix it, without posting code here.
HTML:
<i class="icon-map-marker"></i> Atlanta
CSS:
.icon-map-marker:before{
content: "\f041"
}
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot');
src: url('fontawesome-webfont.eot') format('embedded-opentype'),
url('fontawesome-webfont.woff?') format('woff'),
url('fontawesome-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal
}
[class^="icon-"], [class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
margin-top: 0
}
This is caused by the character not being defined in the font used to display it. A placeholder is displayed instead. In Font Awesome, the fa-map-marker character is on that position.
Clearly font-family: FontAwesome is not used for the :before pseudo-element. Either it is not set, the font is not available, or a browser bug is triggered. I assume that no other CSS rules are used (otherwise overriding somewhere in the cascade could take place).
font-family: FontAwesome not set?
:before is child of the element it is “before”, so it inherits font-family correctly. The parent has font-family: FontAwesome unless the rule is invalid, which is not the case. Therefore the problem is not here and it must be in the unavailability of the font.
To be absolutely sure, try changing your rule for :before to
.icon-map-marker:before {
content: "\f041";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
}
and see if now the character displays OK.
FontAwesome font family not available?
Either the font cannot be downloaded, is broken, or the #font-face at-rule is invalid.
The at-rule seems perfectly valid to me. I’m just wondering, why the question mark after the WOFF path? I think this is a left-over after old IE (< 9) hack, but it should do no harm.
Checking the ability to download correct font file is up to you. You can verify that the font is loaded by sniffing the network traffic, e.g. using Firebug or LiveHTTPHeaders (but be sure to use your font and reload skipping cache via Ctrl + F5).
I think your problem is a browser bug. You did not specify what browser in which version you use, so I cannot say anything more specific.
To be always sure, you can use CSS from the CDN. Or follow the instructions on the same site to get Font Awesome working. You can also read more on bulletproof #font-face yourself, but then you need to keep up with the current implementation status of #font-face in browsers you want to support.
Quick test of fa-map-marker in :before using CSS from CDN
Insert this into your location bar:
javascript:'<title>Font Awesome test</title><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/><style>body:before {font-family: FontAwesome; content: "\\f041";}</style>Atlanta'
The \\ is needed instead of \ inside JavaScript string. The string is a valid HTML5 document.
Side notes
U+F041 is a character from range reserved for private use. Consequentially different fonts may have different characters for this code point.
Maybe it would be better to use more classes instead of the two-in-one. Using icon and map-marker could both simplify your selectors and tell you that your classes could be more semantic. Using a CSS preprocessor could let you compose the more semantic class city of lower, purely presentational units.
Your HTML markup is terrible. It is awfully bent to serve your presentational requirements, but HTML should mark up the structure that is presentation-agnostic. Why don’t you use Atlanta?
may be its a cache issue on your browser, try adding version numbers next to file name.
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot?v1');
src: url('fontawesome-webfont.eot?v1') format('embedded-opentype'),
url('fontawesome-webfont.woff?v1') format('woff'),
url('fontawesome-webfont.ttf?v1') format('truetype');
font-weight: normal;
font-style: normal
}
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
https://lh.rs/8M9Q7EvRBapv
And here's my version :
https://lh.rs/Lbini5YbQZlX
Any ideas?
It's important to note that using custom fonts are not pixel perfect on all browsers since all browsers tend to render the fonts differently. Another issue can be people not enabling ClearType within windows which I'm sure in this case its not but for other readers I decided to include this information.
It would seem that your font support is pretty limited since you are only using .ttf and .eot - for maximum compatibly and limiting render issues it's best to use 'ALL' 5 font types which are:
ttf (TrueType Font)
oft (Adobe/Microsoft Open Font Type, AKA OpenType)
eot (Embedded OpenType)
woff (Web Open Font Format)
svg (Scalable Vector Graphics)
Ideally you want to use SVG as much as you can since this provides the best quality, SVG is supported in modern versions of Andriod Browser, Firefix, Safari, Opera, Chrome but not in IE.
Personally I'd convert the fonts to all these file types and see if the outcome improves, browsers will automatically use their preferred font type. You can use Font 2 Web to convert to the other formats, its important to note that fonts are copyrighted and your client will require licensing, some fonts don't even allow web use.
When I apply a font-weight:bold style, the look of the font is too bold in Safari when compared to other browsers. I tried below css as suggested in some site but its still the same.
text-shadow: #000000 0 0 0px;
Screenshots of text rendering:
Chrome
Safari
Here's my css declaration:
p {
margin: 8px 5px 0 15px;
color:#D8D2CE;
font-size:11pt;
letter-spacing:-1px;
font-weight: bold;
font-family: LektonRegular;
}
#font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-regular-webfont.eot');
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('myfonts/lekton-regular-webfont.woff') format('woff'),
url(myfonts/lekton-regular-webfont.ttf) format('truetype'),
url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg');
font-weight: normal;
font-style: normal;
}
How can this be fixed?
Use -webkit-font-smoothing: antialiased;
The text-shadow trick doesn't work anymore.
For rendering bold text consistently across browsers, your font should explicitly contain bold characters. Otherwise, browsers probably try to make bold variants of characters based on their normal variants, and results are inconsistent across browsers since they likely have different algorithms for such conversion.
Also note that text rendering may be different on different platforms on system level (e.g. Windows, Mac OS). Such differences are OK and do not typically need to be fixed.
See also topic about -webkit-font-smoothing property.
The -webkit solutions won't work for the strong issue for many google fonts, custom fonts and fonts that don't have preset values.
The problem is that you need to specify the value of bold in the strong tags.
This can be done by two ways:
You can either include from Google Fonts or wherever your font is from in your header; it needs both the regular font and the bold font each should have a different font-weight number like 400 regular and 600 bold for example:
<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet">
Or use the aboves source code and paste into your own css like below:
#font-face {
font-family: 'XXX';
font-style: normal;
font-weight: 600;
src: local('XXX SemiBold'), local('XXX-SemiBold'),
url...
}
Use whatever your font is instead of XXX.
Then also in strong {font-weight:600;}
None of the answers here worked for me. Possibly because I am using the windows version of Safari for testing. I had to include the bold font in my CSS to fix the problem. In the case of the original question he would need to add the following (notice it uses the same font-family name)
#font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-bold-webfont.eot');
src: url('myfonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('myfonts/lekton-bold-webfont.woff') format('woff'),
url(myfonts/lekton-bold-webfont.ttf) format('truetype'),
url('myfonts/lekton-bold-webfont.svg#LektonRegular') format('svg');
font-weight: bold;
font-style: normal;
}
This worked in all browsers for me.
I found a solution for this particular issue. Actually any of above solutions dint work for me. So started checking the default webkit styles added by safari and found that -webkit-text-stroke-width was applied to body having value 0.5px. I set it to 0!important and solved the issue for me.