I used Google web font "Droid Arabic Kufi" in my web application, the font works on Google Chrome, Mozilla Firefox and Microsoft Edge, But it does not work on the Apple Safari .. What I'm doing is:
1- Import the font in the top of the CSS file:
#import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
2- Used it, For Example:
body {
font-family: 'Droid Arabic Kufi', sans-serif;
background-color: #f8fafb;}
Why Safari browser does not recognize the font like the other browsers does?
I solved the issue by using the following steps:
1- Download .ttf format file and include it to my project files.
2- Use the #Font-face attribute property to manually define font name and giving source file.
#font-face {
font-family: Droid Arabic Kufi;
src: url(../../fonts/Droid.Arabic.Kufi.ttf);}
3- Access the defined font in any element required with Font-family property.
body {
font-family: 'Droid Arabic Kufi', sans-serif;
background-color: #f8fafb;}
Using this way the font work perfect on the following browser:
Apple Safari
Google Chrome
Microsoft Edge
Mozila Firefox
Opera
So problem which I can't solve for a while is that in Internet Explorer utf-8 characters are bold. Here is code example:
.section.about-houses .tabs-block .tab-content p {
margin: 0 0 30px 0;
line-height: 2.2;
font-family: "Open Sans", sans-serif;
font-weight: 300;
color: #373737;
}
and this is a result:
All characters are UTF-8. The problem is on your fonts: it seems that your main font doesn't have full support of accented characters, so your browser will use an alternate font for the missing characters. To me, it seems that it is still a non bold font, but with more weight compared to your very light default font.
So I would recommend you to look for a font which includes all Latin characters. A complete Unicode font will be too large (and so slow), but you know better what script you need, so you can select only a good font (e.g. for Latin script). On Web fonts (CSS), you can specify the code points (and intervals).
I would like a different font-face for print than for screen.
Unfortunately Google Chrome Print Preview (works on other browsers) won't load the font-face and won't show the text.
But if you try it a second time, the font-face is loaded and then, Google Chrome Print Preview will show the text!
Here is a fiddle on which you can reproduce the problem. (nb: on the fiddle the font url does not exist, but at least the preview should show the text as 'serif').
Is there a better solution than forcing the pre-loading of the print font-face for all #media?
The problems occurs on all versions of Google Chrome <= 53.
I used this code:
#media only print {
#font-face {
font-family: "Computer Modern";
src: url('/fonts/cm/cmunrm.otf');
font-weight: normal;
font-style: normal;
}
body {
font-family: "Computer Modern", serif;
}
}
https://jsfiddle.net/72bsf1n0/
Just found this question via Google after we had just experienced the same problem. Sad to see 11 months gone by with no answer, so perhaps this will help you and others.
Chrome seems to load the custom font 'on-demand'. So, if the font isn't already used on the page, your first 'Print Preview' fails to have it yet, subsequent ones will have it. Likely a timing issue there.
One solution would be to make sure you also use the print font on the regular version of the page.
#font-face {
font-family: "Computer Modern";
src: url('/fonts/cm/cmunrm.otf');
font-weight: normal;
font-style: normal;
}
#media only print {
body {
font-family: "Computer Modern", serif;
}
}
.printfont {
font-family: "Computer Modern", serif;
}
https://jsfiddle.net/72bsf1n0/8/
There is a issue for this here
https://bugs.chromium.org/p/chromium/issues/detail?id=284840
For now you need to sure there is printed font rendered before using print and you render at least 1 character from every language group you want to print:
Cyrillic (Supported by Open Sans)
Cyrillic Extended (Supported by Open Sans)
Greek (Supported by Open Sans)
Greek Extended (Supported by Open Sans)
Latin (Supported by all Fonts)
Latin Extended (Supported by Open Sans)
Vietnamese (Supported by Open Sans)
For now I add characters from Latin extended
<div class="chrome-font-fix">sš<b>sš</b><i>sš</i></div>
with invisible style
.chrome-font-fix {
position: absolute;
visibility: hidden;
}
I am writing the following CSS code to create font face style using an Arabic font, and i am using windows OS...
the problem that browsers doesn't read it, i am testing on chrome, firefox, explorer and opera... the four browsers doesn't recognize the font...
here is my CSS code...
#media screen, print { #font-face {
font-family: 'FUFONT';
src: url(../fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), url(../fonts/ScheherazadeRegOT.ttf) format("opentype");
font-weight:bold; } }
and call it as follow...
.navigation ul li a {font-family: FUFONT, Arial, Helvetica, sans-serif; font-size:18px;}
what do you think the problem is?
The short answer: till now there is no generator for arabic fonts so we can use it in web.
Farther explanation: when using http://www.fontsquirrel.com/fontface/generator
with Expert:
Subsetting: No Subsetting.
CSS Formats: Smiley
you'll be able to see your Arabic font in the web pages with one problem: no letter reshaping which means that the letters of one word will not be joint together, because there's no generator till now support the required OpenType functionality for Arabic language.
Now you can use Amiri Font ( http://www.phpandthecity.com/2012/12/use-font-face-with-arabic-font.html )
Solution :
1- goto >>> http://www.fontsquirrel.com/fontface/generator
2- upload your font on expert mode
3- check only those values :
--------> Font Formats: woff
--------> Truetype Hinting: Font Squirrel
--------> X-height Matching: none
--------> Subsetting: No Subsetting
4- Download your files
5- past this code into your css file :
#font-face {
font-family: 'Name of your font';
src: url('url to your font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
6- call your font and apply it on some element
ex :
h1{
font-family : "name of your font" ;
}
Enjoy it !
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.