I generate a persian font by Font Squirrel Like This:
#font-face {
font-family: 'b_yekanregular';
src: url('dbs-byekan-webfont.eot');
}
#font-face {
font-family: 'b_yekanregular';
src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2'),
url(data:application/font-woff;charset=utf-8;base64,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) format('woff'),
url('dbs-byekan-webfont.ttf') format('truetype'),
url('dbs-byekan-webfont.svg#b_yekanregular') format('svg');
font-weight: normal;
font-style: normal;
}
Now in action font-face work in chrome but not work in FF(37.0.1).
Chrome true font:
http://i.stack.imgur.com/bTV1k.png
FF False font :
http://i.stack.imgur.com/CGcsR.png
How do can i fix this problem?
Related
I'm currently using a custom font on my website. The font looks fine on desktop, however on mobile it looks completely different. I'm also using all the right formats. Here is the code and pictures below:
Also When I remove the font family, it turns into a serif font which means a font is in fact loading, but why it looks completely different I'm not sure.
#font-face {
font-family: 'futura';
src: url('./futura.eot');
src: url('./futura.eot?') format('embedded-opentype'),
url('./futura.woff2') format('woff2'),
url('./futura.woff') format('woff'),
url('./futura.ttf') format('truetype'),
url('./futura.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Solution: I just had to change the font-weight from normal to bold.
i had same problem, i remove font type and just keep ttf,i use media query for limit this change for mobile
#font-face {
font-family: 'futura';
src: url('./futura.ttf');
}
#media(min-width:768px){
#font-face {
font-family: 'futura';
src: url('./futura.eot');
src: url('./futura.eot?') format('embedded-opentype'),
url('./futura.woff2') format('woff2'),
url('./futura.woff') format('woff'),
url('./futura.ttf') format('truetype'),
url('./futura.svg') format('svg');
font-weight: normal;
font-style: normal;
}
}
if this wont work. add this line on top of your css
#font-face {
font-family: 'futura';
src: url('./futura.ttf');
}
I have used the font "DinPro-Light" on my website. It works fine on all browsers on PC except Mac's browsers. The other weights (Regular, Bold, etc) are fine on both PC and Mac. Only the "light" weight is causing the problem. It is rendered like the regular weight...
Below is the CSS used for the font. Thank you...
#font-face {
font-family: 'DinPro';
src: url('../fonts/DinPro/PFDinTextPro-Light.eot');
src: local('☺'), url('../fonts/DinPro/PFDinTextPro-Light.woff') format('woff'), url('../fonts/DinPro/PFDinTextPro-Light.ttf') format('truetype'), url('../fonts/DinPro/PFDinTextPro-Light.svg') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'DinPro';
src: url('../fonts/DinPro/PFDinTextPro-Regular.eot');
src: local('☺'), url('../fonts/DinPro/PFDinTextPro-Regular.woff') format('woff'), url('../fonts/DinPro/PFDinTextPro-Regular.ttf') format('truetype'), url('../fonts/DinPro/PFDinTextPro-Regular.svg') format('svg');
font-weight: 500;
font-style: normal;
}
This css line fixed the problem:
-webkit-font-smoothing: antialiased;
code :
#font-face {
font-family: 'GothamRnd-Medium';
src: url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.eot');
src: url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.eot?#iefix') format('embedded-opentype'),
url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.woff') format('woff'),
url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.ttf') format('truetype'),
url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.svg#GothamRnd-Medium') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ArcherBoldItalic';
src: url('about/fonts/Archer-BoldItal/archer-boldital.eot');
src: url('about/fonts/Archer-BoldItal/archer-boldital.eot?#iefix') format('embedded-opentype'),
url('about/fonts/Archer-BoldItal/archer-boldital.woff') format('woff'),
url('about/fonts/Archer-BoldItal/archer-boldital.ttf') format('truetype'),
url('about/fonts/Archer-BoldItal/archer-boldital.svg#ArcherBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'proxima_novalight';
src: url('about/fonts/ProximaNova-Light/proximanova-light-webfont.eot');
src: url('about/fonts/ProximaNova-Light/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
url('about/fonts/ProximaNova-Light/proximanova-light-webfont.woff') format('woff'),
url('about/fonts/ProximaNova-Light/proximanova-light-webfont.ttf') format('truetype'),
url('about/fonts/ProximaNova-Light/proximanova-light-webfont.svg#proxima_novalight') format('svg');
font-weight: normal;
font-style: normal;
}
I have embedded three fonts. Out of three fonts 'proxima_novalight' font is working perfectly in IE8 but other two fonts are not working. I checked all the code but i didn't find the solution. Its working fine in other browsers. Any idea guys ?
If IE8 throws the CSS3111: #font-face encountered unknown error, you
probably have the non-matching font-family name problem.
To resolve this, you need to edit your font file, define identical
names for Fontname, Family name and Name for humans and export your
TTF. This can be done using the FontForge application. Afterwards, you
than again convert it for web (EOT, WOFF).
#font-face {
font-family: 'portagoitc-tt';
src: url('fonts/portagoitc-tt.eot');
src: url('fonts/portagoitc-tt.eot?iefix') format('opentype'),
url('fonts/portagoitc-tt.woff') format('woff'),
url('fonts/portagoitc-tt.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Please check for further details
Font Face not working in IE8 as expected
I've updated Google chrome browser recently. I noticed some of the fonts are not rendering correctly. On the other browsers it's seems fine. However this issue only appear in Chrome v32.0.17...76 m.
I've used "Open Sans" & "Novecentowide" Fonts.
The below CSS styles I've used for my HTML heading.
CSS
----
#font-face {
font-family: 'OpenSansSemibold';
src: url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot');
src: url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.woff') format('woff'),
url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'OpenSansRegular';
src: url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot');
src: url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.woff') format('woff'),
url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.ttf') format('truetype'),
url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'novecentowide-medium-webfont';
src: url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.eot');
src: url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.woff') format('woff'),
url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.ttf') format('truetype'),
url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.svg#novecentowide-medium-webfont') format('svg');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'novecentowide-normal-webfont';
src: url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.eot');
src: url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.woff') format('woff'),
url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.ttf') format('truetype'),
url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.svg#novecentowide-normal-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
h1 { font-family: 'OpenSansRegular'; }
HTML
---------
<h1> Test on CHrome </h1>
However still fonts are not rendering correctly on new version of Chrome Browser. Please help me to solve this issue.
Edit:
On Chrome
On fire fox
On Chrome
-----------Next Method-------------------------------------------
HTML
<h6 class="title1">This is opensans Regular</h6>
<h6 class="title2">This is opensans semibold</h6>
CSS
#font-face {
font-family: 'OpenSansRegular';
src: url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot');
src: url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.woff') format('woff'),
url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.ttf') format('truetype'),
url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-style: normal;
}
#font-face {
font-family: 'OpenSansSemibold';
src: url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot');
src: url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.woff') format('woff'),
url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
font-style: normal;
}
h6.title1 {
font-family: 'OpenSansRegular';
font-weight: normal;
}
h6.title2 {
font-family: 'OpenSansSemibold';;
font-weight: 600;
}
h6.title1, h6.title2 { color: #54403C; font-size: 1.3em; }
body { font-size: 10px; }
Chrome
Fire Fox
So Chrome is rendering in normal font-weight, and Firefox is bold?
The font you're specifying only has a normal weight. So Chrome is correctly rendering the font, and Firefox has applied a faux bold effect to a non-bold typeface, as its default style for an h1 is to apply "boldness".
If you want them both normal:
h1 {
font-family: 'OpenSansRegular';
font-weight: normal; /* tell all browsers not to apply faux bold */
}
Or, if you want them both bold, specify the semi-bold face you have:
h1 {
font-family: 'OpenSansSemibold';
font-weight: 600;
}
This is a common pitfall when working with web fonts - always specify a font-weight on elements using them to avoid this.
EDIT
Adding text-rendering: optimizeLegibility; to the heading styles may help to normalise the rendering between browsers. I'm not sure if it addresses actual character rendering or just uses a different kerning algorithm, but worth a shot. It's difficult for me to test this as I don't have the same issue with this font on Chrome here.
i searched through Stack overflow but fail to find a solution in regards to the problems i face...I believe many people is facing the same problem as well but i am not sure why their solutions can't work on mine.
The Problem:
This is regarding #font-face.
The code on CSS:
#font-face {
font-family: 'JaguarJCBold';
src: url('fonts/jagb____-webfont.eot');
src: url('fonts/jagb____-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/jagb____-webfont.woff') format('woff'),
url('fonts/jagb____-webfont.ttf') format('truetype'),
url('fonts/jagb____-webfont.svg#JaguarJCBold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'TrajanProBold';
src: url('fonts/trajanprobold-webfont.eot');
src: url('fonts/trajanprobold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/trajanprobold-webfont.woff') format('woff'),
url('fonts/trajanprobold-webfont.ttf') format('truetype'),
url('fonts/trajanprobold-webfont.svg#TrajanProBold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'TrajanProRegular';
src: url('fonts/trajanproregular-webfont.eot');
src: url('fonts/trajanproregular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/trajanproregular-webfont.woff') format('woff'),
url('fonts/trajanproregular-webfont.ttf') format('truetype'),
url('fonts/trajanproregular-webfont.svg#TrajanProRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MyriadProBlack';
src: url('fonts/myriadpro-black-webfont.eot');
src: url('fonts/myriadpro-black-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myriadpro-black-webfont.woff') format('woff'),
url('fonts/myriadpro-black-webfont.ttf') format('truetype'),
url('fonts/myriadpro-black-webfont.svg#MyriadProBlack') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MyriadProRegular';
src: url('fonts/myriadproreg-webfont.eot');
src: url('fonts/myriadproreg-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myriadproreg-webfont.woff') format('woff'),
url('fonts/myriadproreg-webfont.ttf') format('truetype'),
url('fonts/myriadproreg-webfont.svg#MyriadProRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone know how to make this work for google chrome to allow my fonts to take effect?
Try using the Font Squirrel Font Face generator:
http://www.fontsquirrel.com/fontface/generator
It will give you all the correct CSS for every possible browser.
All you've done is set up your fonts so that they're ready to use in your css file. You need to apply the font to what ever piece of text you wish to style. You would do this the same way you would when using any other web safe font.
eg.
.yourElement {
font: 30px JaguarJCBold;
}