I was trying to use Helvetica font for my next project, but It was rendering heavy on Google Chrome but it was working fine on other browser.
/*...Helvetica.*/
#font-face {
font-family: 'helvetica';
src: url('helvetica/Helvetica.eot');
src: local('?'), url('helvetica/Helvetica.woff') format('woff'), url('helvetica/Helvetica.ttf') format('truetype'), url('helvetica/Helvetica.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Did anyone faced the same problem?
Try using the following code on html/body tag
-webkit-font-smoothing: antialiased !important
Related
I have searched for its solution, and I think, I'm doing everything like the suggestions, but it is still not working. Custom font works on Chrome, IE, but not in Firefox. I have used font face generator to generate fonts and the code. I have placed the #font-face code in header, custom.css file (in theme_root/css/) and also in style.css, but it is not working.
Placed this in header.php:
<style>
#font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
Placed this in style.css:
#font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Placed this in custom.css:
#font-face {
font-family: 'Bebas Neue';
src: url('../fonts/bebasneue.eot');
src: url('../fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('../fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('../fonts/bebasneue.woff') format('woff'),
url('../fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Working everywhere, except Firefox. I'm confused
http://tour.khujbo.com
Also, this font works in html pages in Firefox fine. I have used this font in this template and it works on Firefox: http://khujbo.com. Seems to me, that the problem with Firefox and WordPress combination.
What should I do?
I don't think you need to define this font-face everywhere. You can place the CSS only in custom.css. And, you have defined the "Bebas Neue" font-face in your header.php with wrong URL. CSS is trying to get the font (woff, ttf, etc) from http://tour.khujbo.com/fonts/. Please correct your CSS with the right location.
BTW, my suggestion would be, you just place and load the CSS only from custom.css and remove all other definitions.
Hope this will solve your problem.
you must always be sure that the font is legal to use on your site.
However Firefox and Chrome should both support TTF.
get more info from here.
be sure u converted font to all format try this site to do http://everythingfonts.com/font-face and the path should be right !
#font-face {
font-family: 'GE SS Unique';
src: url('../../fonts/GE_SS_Unique_Light.eot');
src: url('../../fonts/GE_SS_Unique_Light.eot?#iefix') format('embedded-opentype'),
url('../../fonts/GE_SS_Unique_Light.woff') format('woff'),
url('../../fonts/GE_SS_Unique_Light.ttf') format('truetype'),
url('../../fonts/GE_SS_Unique_Light.svg#GE_SS_Unique_Light') format('svg');
font-weight: normal;
font-style: normal;}
h1,h2,h3,h4,h5,h6{
font-family: 'GE SS Unique';
}
Iam doing a website in ubuntu and finished with UI part. Everything was working smoothly in ubuntu but when i switched on to windows all the fonts are distorted. I tried the following code
#font-face {
font-family: 'garrisonsb';
src: url('../fonts/garrisons-bold.eot');
src: url('../fonts/garrisons-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/garrisons-bold.woff') format('woff'),
url('../fonts/garrisons-bold.ttf') format('truetype'),
url('../fonts/garrisons-bold.svg#garrison_sansbold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'garrisons';
src: url('../fonts/garrisons-regular.eot');
src: url('../fonts/garrisons-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/garrisons-regular.woff') format('woff'),
url('../fonts/garrisons-regular.ttf') format('truetype'),
url('../fonts/garrisons-regular.svg#garrison_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'rupee';
src: url('../fonts/Rupee.eot');
src: url('../fonts/Rupee.eot?#iefix') format('embedded-opentype'),
url('../fonts/Rupee.woff') format('woff'),
url('../fonts/Rupee.ttf') format('truetype'),
url('../fonts/Rupee.svg#rupeeregular') format('svg');
font-weight: normal;
font-style: normal;
}
the specified code is been generated using squirrel-generator. I tried with font-smooth property set to 'always' and also with -webkit-font-smoothing set to antialiased and the font-weight was also specified as 700 for regular and 900 for bold instead of 'normal', but nothing worked.
please suggest optimum solution......
Web fonts are not smooth in all the browsers. You may have to use -webkit-font-smoothing: antialiased for web-kit browsers.
You better use text-shadow: 0px 0px 1px #GOOD-COLOR-HERE or text-shadow: 0px 0px 1px rgba(COLOR-SETTINGS-HERE) and tweak the color settings and shadow for the best result.
When saying the problem stays within all the browsers it pops the question, is something wrong with your font or maybe something else?
Can you try to do that with another custom font in Windows to see the result?
Though the solution #Madhu Rox provided is pretty cutting edge.
I am trying to use a custom font for my website, but it appears wrong in Chrome (latest) and Opera browsers although it appears correctly (smooth) on other browsers. I tried couple of different fonts, with same results on Chrome/Opera.
My code:
#font-face {
font-family: 'mainFont2';
src: url('../fonts/Eurostile.eot');
src: local('☺'), url('../fonts/Eurostile.woff') format('woff'), url('../fonts/Eurostile.ttf') format('truetype'), url('../fonts/Eurostile.svg') format('svg');
font-weight: normal;
font-style: normal;
}
The issue:
Thats just how the browser and OS renders the font..but try to call the .svg format before the .woff format it might fix this.
#font-face {
font-family: 'mainFont2';
src: url('../fonts/Eurostile.eot');
src: local('☺'),
url('../fonts/Eurostile.svg') format('svg'),
url('../fonts/Eurostile.woff') format('woff'),
url('../fonts/Eurostile.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I'll refer you to this question:
https://stackoverflow.com/a/4060778/1121870
Or try font-smooth:
http://www.w3.org/TR/WD-font/#font-smooth-prop
And there's a nasty little hack here:
http://www.elfboy.com/blog/text-shadow_anti-aliasing/
I use google "Comfortaa" font for a blog with this code
<link href='http://fonts.googleapis.com/css?family=Comfortaa&subset=greek,latin' rel='stylesheet' type='text/css'>
However, the font (along with other fonts) are displayed more boldly on mac Firefox (display fine on Chrome mac/win firefox win etc)
I changed all em to px just to be sure, plus I though I could try font squirrel with the code
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 2, 2012 */
#font-face {
font-family: 'comfortaabold';
src: url('comfortaa-bold-webfont.eot');
src: url('comfortaa-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('comfortaa-bold-webfont.woff') format('woff'),
url('comfortaa-bold-webfont.ttf') format('truetype'),
url('comfortaa-bold-webfont.svg#comfortaabold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'comfortaalight';
src: url('comfortaa-light-webfont.eot');
src: url('comfortaa-light-webfont.eot?#iefix') format('embedded-opentype'),
url('comfortaa-light-webfont.woff') format('woff'),
url('comfortaa-light-webfont.ttf') format('truetype'),
url('comfortaa-light-webfont.svg#comfortaalight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'comfortaaregular';
src: url('comfortaa-regular-webfont.eot');
src: url('comfortaa-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('comfortaa-regular-webfont.woff') format('woff'),
url('comfortaa-regular-webfont.ttf') format('truetype'),
url('comfortaa-regular-webfont.svg#comfortaaregular') format('svg');
font-weight: normal;
font-style: normal;
}
Still the issue persists.(I 'm not really sure where to put the #font face -I applied it through blogger css)
Am I doing something wrong, or is this plainly a browser rendering issue that can't be fixed?
Try using a numerical font-weight value. In the Google webfont listening you can see the correct font-weight for each style. In the case of Comfortaa these are: {font-weight: 300;} for book, {font-weight: 400;} for normal and {font-weight: 700;} for bold.
I have a CSS file in /css and fonts in /images. My CSS code uses #font-face, and it works in IE8, IE9, and all the decent browsers, but obviously not in IE7.
#font-face {
font-family: 'ChunkFiveRegular';
src: url('../image/chunkfive-webfont.eot');
src: url('../image/chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url(../images/chunkfive.woff) format('woff'), url(../images/chunkfive-webfont.ttf) format('truetype'), url(../images/chunkfive-webfont.svg) format('svg');
font-weight: normal;
font-style: normal;
}
h1, h2, h3 {
font-family: ChunkFiveRegular, Georgia, serif;
font-weight: normal;
text-transform: uppercase;
}
Why does the text still show up set as Georgia?
If your fonts are in /images, you need to use /images, not /image. That said, your fonts belong in /css; fonts are not images.
Also, according to Paul Irish's article, 'eot' should work better than 'embedded-opentype' (untested).
http://www.thecssninja.com/demo/css_fontface/
#font-face {
font-family:InYourFace;
src: url('Ubuntu-B.eot');
// this smile and ? fix your problem
// because IE don't wanl load local font without this hack
src: url('Ubuntu-B.eot?') format('☺'),
url('Ubuntu-B.woff') format('woff'),
url('Ubuntu-B.ttf') format('truetype'),
url('Ubuntu-B.svg#webfontssbCkuz5') format('svg');
}