I am loading a font with 3 weights from Google fonts, and I can display properly text in the 3 weights on Firefox and Chrome, but it won't work in Safari:
https://jsfiddle.net/vmarquet/u6ezqbrm/
Is Safari not supporting font-face aliases?
This should work for you: https://jsfiddle.net/7czpo2s3/
When I tested your sample, only the Regular weight displayed in Chrome and Safari. The other #font-face declarations you had might have been using your local copy of the font, if you have it installed, but they wouldn’t work for anyone else who doesn’t have it installed locally.
Because you are using Google Fonts, the #font-face declarations to use the hosted fonts are already written for you. If you go directly to the Google Fonts URL, you’ll see you’re getting a CSS stylesheet with the #font-face declarations already written. The font-family for all the styles is Montserrat. Instead of using the different weights with the font-family name, you want to change it with the font-weight.
Here’s what I changed from your sample:
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap" rel="stylesheet">
<style>
.light,
.regular,
.bold {
font-family: "Montserrat";
}
.light { font-weight: 300; }
.regular { font-weight: 400; }
.bold { font-weight: 700; }
</style>
<div class="regular">Montserrat</div>
<div class="light">Montserrat</div>
<div class="bold">Montserrat</div>
If you do have the Montserrat font installed locally, you might also want to disable it. Then, it will be easier to tell when things are working, as Google Fonts will also use the local fonts if they are available.
I try to install Roboto on my website, using Google Fonts, and I feel desperate to see that Roboto is bolder (much bolder) in Firefox than in Google Chrome.
Here are my codes :
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
And
p
{
font-size: 1.4rem;
line-height: 1.5;
font-family: "Roboto", sans-serif;
letter-spacing: 0;
color: #313131;
}
And here are two preview of Roboto Font, first with Firefox, second with Chrome:
As you can see, the Chrome Roboto is much lighter.
I don't know why it happen, but I've find something on Google Font. Using Firebug on their own code, I discover that the Roboto Font used on their website has attributes :
element.style {
font-family: "Roboto script=all rev=1";
}
And when you remove the "Script=all rev=1", Roboto become much bolder in Firefox and in Chrome (but so much in Firefox). Just like on my Work in progress.
Does somebody have an answer, a solution, or something? I feel lonely to see that not even Google can inform me about what is script=all rev=1 and why it makes Roboto much lighter on Google Font.
The reason it is lighter is because Chrome is using a locally installed Roboto Font which does not have the bold version, and it is thus falling back to the thin version (rather than switching to the web font.) This is arguably a Chrome bug but I don't know of any existing report.
According to Force Chrome to use external font in CSS the special font name works because the Google Web Font stylesheet gives an alternate name for the font "Roboto script=all rev=1", which obviously doesn't exist on the user's local system and thus gets served by web font.
I'm developing a wordpress website, i have defined the hn titles in the theme options. For example: h5 has a font-weight: 300;.
But chrome windows renders it wrongly, it renders it as font-weight:bold; (it's ok on chrome mac).
I even tried to change it via the inspector to see from where the problem came, but nothing changed.
Here's some pictures to show you the deference:
Chrome Windows (how it shouldn't be)
FireFox Windows (how it should be)
Please add code snippet.
I think you should use normalizer
Normalize.css
Just try to add font-face for custom font weights:
#font-face {
font-family: Roboto;
font-weight: 300;
font-style: normal;
src: url("Roboto-Light.ttf") format("opentype"); }
I have the following CSS:
font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 100; letter-spacing: 1px; }
It works on all Mac browsers (Chrome, Safari) But I opened my project on Chrome and Internet explorer on Windows, it displays the font as bold rather than light. I'm not sure how to fix this but I need the design to work cross platform with the design that appears on mac.
Thanks in advance.
Edit: I've tried using arial but arial doesn't become light on both mac and windows.
The font you see on Windows is not bold, it is just regular Arial.
In almost all Windows systems, the first available font family among those listed in the font-family value is Arial. Since Arial has no typeface of weight 100, or of any weight less than 400, the normal (400) weight typeface is used instead, by the font matching algorithm.
Fonts in standard distributions of Windows generally lack typefaces with weight less than normal. So to use lighter typefaces, you would need to use downloadable fonts (web fonts) via #font-face. See e.g. Is #font-face usable now?
(SO has many specific questions on using #font-face, check them if you run into specific problems with it).
The font-family property inform the browser that it's needed to use that font. If there is no path for it, it will check if the system have that one.
In order to be able to have a font that will work on all systems, you need to use the #font-face property.
This last one will allow you to specify path for all the format font, that most of the browsers will download to display it correctly. (For your information all recent browser support it)
#font-face {
font-family: 'myFont';
src: url('myFont.eot');
src: url('myFont.eot?#iefix') format('embedded-opentype'),
url('myFont.woff') format('woff'),
url('myFont.ttf') format('truetype'),
url('myFont.svg#myFont') format('svg');
font-weight: normal;
font-style: normal;
}
If you want more information about that property you can check the reference here:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Unfortunetly in your case the font HelveticaNeue is copyrighted, you need to buy the rights to be able to use it as a webfont.
You can take a look here about pricing:
http://www.fonts.com/search/all-fonts?searchtext=HelveticaNeue#product_top
Also, if you have already the right and have one of the format that you wish to convert to a webfont, you can accomplish that here:
http://www.fontsquirrel.com/
Finally, if you prefer you can use Google Fonts that will host the files for you, and you will just have a small script to insert inside your pages:
http://www.google.com/fonts
You can use web fonts (free or paid) as suggested by others, or just use a nice font stack that is likely to cover all bases. CSS Tricks has a nice set of them: http://css-tricks.com/snippets/css/font-stacks/
In terms of font weight, your CSS specifies a very light font weight:
font-weight: 100;
So if you want to use bold Arial instead, you need to change that.
I am using Google Web Font's PT-sans
font-family: 'PT Sans',Arial,serif;
but it looks different in Chrome and Firefox
Is there anything that I need to add so that it looks same in all browsers?
For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.
For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:
#font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:
function setBrowserClasses() {
if (true == $.browser.mozilla) {
$('body').addClass('firefox');
}
}
Then in my CSS, I can say
body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:
body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
There are a few fixes. But usually it can be fixed with:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Sometimes it can be due to font-weight. If you are using a custom font with #font-face make sure your font-weight syntax is correct. In #font-face the idea of the font-weight/font-style properties are to keep your font-family name across different #font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").
I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.
css reset may fix the problem, I am not sure .
http://yuilibrary.com/yui/docs/cssreset/
I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother.
There is nothing you can do about it. good luck
To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.
i found this to be working great :
-webkit-text-stroke: 0.7px;
or
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
experiment with the "0,7" value to adjust to your needs.
The lines are added where you define the bodys font.
here is an example:
body {
font-size: 100%;
background-color: #FFF;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
font-weight: lighter;
-webkit-text-stroke: 0.7px;
As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.
To fix this, you can do the following:
First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:
https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js
Now that you can target a Browser/OS, create the following 'new' font:
#font-face {
font-family: 'Custom PT Sans';
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
font-weight: normal;
font-style: normal;
}
The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.
Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext
You may also rename your #font-face custom font-family alias.
Create a simple CSS rule to use that font targeting Browser/OS or both:
.mac .navigation a {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Or
.mac.webkit p {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Done. Just apply the font-family rule wherever you need to.
Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).
I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.
Set "Accelerated 2D Canvas" to "Disabled"
(In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)
Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.
On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.
The new fix (for me) appears to be:
Settings -> Show advanced settings... -> System
UNCHECK "Use hardware acceleration when available"
https://superuser.com/questions/821092/chromes-fonts-look-off
The issue might be more what we don't set in our CSS than what we do set.
In my case, FF is showing text in the default Times New Roman, while Chrome uses Montserrat as expected.
This happens to be because in Chrome I set Montserrat as the default, while FF has no default.
So, I think that some browser differences are rooted in the browser's configuration rather than in my CSS.