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 am using 2 #font-face on my index.css file with the purpose of using a font in regular weight and in bold weight as my default font in my entire application:
index.css file:
body {
padding: 0px;
margin:0px;
font-family: "LucidaGrande";
}
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrande.ttf) format('truetype');
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrandeBold.ttf) format('truetype');
}
Now, the regular weight seems to be working for the entire application, however, on an other part of my application I am trying to use the font in bold weight like this:
#presentation-text em{
font-size: 35px;
color: rgb(139, 59, 28);
font-style: normal;
font-weight: 900;
}
However the 900 i.e the bold weight is not being applied, still regular.
Am I using this correctly?
If you're using #font-face, never use local(...). The whole reason you're using #font-face is to ensure that you control exactly which font resource gets loaded for which (set of) font properties. The last thing you want is for the OS to black-box fetch you what it thinks the font is for the name you specified. Even if it really does find Lucida Grande for some user, there is zero guarantee it's going to be the same version you have installed on your development machine.
Interestingly that actually tangential to the real problem here: the way you've written your CSS right now means that, because you have the font installed locally, whatever follows local(...) will never even be looked at by the browser, similar to what happens when you're using font-family: serif, Times. The browser knows how to resolve the first thing, so it immediately stops: it already found what it needed to find.
Effectively your current CSS, running in a browser on your own machine, says this, as far as the browser is concerned:
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande);
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande);
}
So you're loading the exact same thing in both declarations. As CSS weights for the text shaper in the browser are entirely independent from the system text engine, the result is exactly what you're seeing: both rules declare the same font resource as the one to use when you say font-family: LucidaGrande, both with or without font-weight: 900.
Drop local(...) and it'll instead work exactly as you need it to.
Also, you'll want to turn those .ttf files into WOFF2 and then load those, because they're much smaller, as well as a promise to the browser that these are indeed unencumbered webfonts.
I faced a problem using fonts via #font-face: Chrome ignores font-weight rule with this font, so captions look poor. Searching made no results in my case. So I found another version of my font to use it with Chrome.
Can you tell me the simplest way to set another font for headers only in this browser?
To set a style specifically for the browser, the easiest solution is to use javascript to detect the browser and write the browser name to the body tag on the page as a classname. Then you can use the classname to control CSS for that browser.
Here's a jsFiddle that detects Chrome.
But your question might be able to be better solved without adding an extra script and markup.
Double-check your font path. Some browsers will still find the font, some are more picky:
#font-face {
font-family: 'your-font-name';
src: url('/fonts/your-font-name.woff2') format('woff2'), /* check path */
url('/fonts/your-font-name.woff') format('woff'); /* check path */
font-weight: normal; /* if this is being ignored, try declaring it in the h1 */
font-style: normal;
}
If you've declared "font-weight: normal;" in your #font declaration, and it's being ignored, for some browsers you need to create an additional rule for the h1 style:
h1 {
font-weight: normal;
}
I am newbie to CSS.
Specifically, now I am using IE8. My web page works fine with MS PGothic font in japanese script. But when we change IE8 browser font to Arial Unicode MS. The webpage does not look fine. This happens only in IE8, in firefox and chrome, even change is OK.
My problem is
I have so many CSS files more than 200.
So I want to change my browser font to MS PGothic for my website
or use only web page font not use browser font?
Which is possible? I want to know code sample for that. Any help is are greatly appreciated.
Before changing to Arial Unicode MS
After changing to Arial Unicode MS
It sounds like you need to specify the font in your CSS, which can be done this way (falling back to a sans-serif font):
body {
font-family: "MS PGothic", sans-serif;
}
If you have so many CSS files, however, the font-family value be overridden in one of them, so you might want to use the !important value, like this:
body {
font-family: "MS PGothic", sans-serif !important;
}
This can be improved further by including selectors for input and textarea so that form fields use this font as well:
body, input, textarea {
font-family: "MS PGothic", sans-serif !important;
}
We can also use the Japanese font name as well, just in case. Finally, I recommend specifying the Meiryo font which looks smoother than MS PGothic and is available on Windows Vista and above. Also, fonts for Mac should be included so I think the best CSS for Japanese pages is something like this:
body, input, textarea {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}
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.