I have this to attach custom font into my page
#font-face {
font-family: "Pushkinf";
src: url(../fonts/pushkin.ttf);
}
It works on Safari and Google Chrome, but doesn't work on firefox and IE. Why is this happening and how to fix this?
For proper cross-browser support, you'd need to utilize multiple font formats.
#font-face {
font-family: "Pushkinf";
src: url('../fonts/pushkin.eot');
src: url('../fonts/pushkin.woff') format("woff"),
url('../fonts/pushkin.ttf') format("truetype"),
url('../fonts/pushkin.svg#Pushkinf') format("svg");
}
First of all You need to check the format of fonts Which Supports different browser
U need to Give Like this
#font-face {
font-family: 'Pushkinf';
src: url('fonts/pushkin.eot');
src: url('fonts/pushkin.eot?#iefix') format('embedded-opentype'),
url('fonts/pushkin.woff') format('woff'),
url('fonts/pushkin.ttf') format('truetype'),
url('fonts/pushkin.svg#pushkin') format('svg');
font-weight: normal;
font-style: normal;
}
Checkout for More details about the .eot fornt here
Related
I am trying to use the SegoePrint font on my rails app. I have in app/assets/fonts both files
SegoePrint.ttf
SegoePrint.eot
In my stylesheets if I have
#font-face {
font-family: "SegoePrint";
src: url(SegoePrint.ttf) format("truetype");
}
It works only for firefox, not for IE but if I have
#font-face {
font-family: "SegoePrint";
src: url(SegoePrint.ttf) format("truetype");
src: url(SegoePrint.eot);
src: url(SegoePrint.eot?#iefix) format("embedded-opentype");
}
I works only for IE and not for firefox anymore. What is the right syntax to have it work for both browsers please? Thanks.
how about if you using this syntax below
#font-face {
font-family: 'SegoePrint';
src: asset-url('SegoePrint.eot');
src: asset-url('SegoePrint.eot') format('embedded-opentype'),
asset-url('SegoePrint.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
My site: http://arethebaronsplaying.com/
isn't rendering fonts correctly in IE 10 or IE 11. Here's my css:
#font-face {
font-family: 'Mono Social Icons Font';
src: asset_url('fonts/MonoSocialIconsFont-1.10.eot');
src: asset_url('fonts/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
asset_url('fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
asset_url('fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
asset_url('fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: asset_url('fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'hamilton18';
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.eot');
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.eot?#iefix') format('embedded-opentype'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.woff') format('woff'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.ttf') format('truetype'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.svg#MonoSocialIconsFont') format('svg');
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Everything looks great in chrome/safari/firefox. Any ideas?
To solve this problem just add -ms-font-feature-settings:"liga" 1; to your css
for example:
.social .icon {
-ms-font-feature-settings:"liga" 1;
font-family:'Mono Social Icons Font';
-webkit-text-rendering:optimizeLegibility;
-moz-text-rendering:optimizeLegibility;
-ms-text-rendering:optimizeLegibility;
-o-text-rendering:optimizeLegibility;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
}
Looking at the console in IE of your website, there appear following error -
"CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable."
On web, these are the two links which talk about this issue and common solution:
https://github.com/tapquo/lungo.icon/issues/1
and
http://codecanyon.net/forums/thread/css3114-fontface-failed-opentype-embedding-permission-check-permission-must-be-installable/78963
common solution link:
http://carnage-melon.tom7.org/embed/
However the talked tool seems available only for older version of windows and not for latest version of windows.
#font-face is driving me bonkers! What else is new?
I have this code in my stylesheet:
#font-face {
font-family: BebasNeue;
src: url('/style/fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg'),
url('/style/fonts/bebasneue-webfont.woff') format('woff'),
url('/style/fonts/bebasneue-webfont.ttf') format ('truetype'),
url('/style/fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: Quicksand;
src: url('/style/fonts/quicksand-regular-webfont.svg#Quicksand') format('svg'),
url('/style/fonts/quicksand-regular-webfont.woff') format('woff'),
url('/style/fonts/quicksand-regular-webfont.ttf') format('truetype'),
url('/style/fonts/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
Quicksand loads, Bebas does not. I have re-downloaded the font (from Font Squirrel), reconverted it, pulled my hair out, prayed to Odin...
In Chrome's inspector I get an "Invalid CSS property value on the SVG line of the Bebas stylesheet, but I can't see any difference between that and the same line under Quicksand. In both Chrome and FF, quicksand-regular-webfont.woff shows up under resources, but -surprise!- not bebasneue-webfont.woff.
Is it possible that the mistake is here:
src: url('/style/fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg')
and you have to write ...#bebasneue_regular instead?
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 have tried a few different ways to include the correct fonts in the CSS. I know that I need the eot version for the font to work on IE, but I can't get it to recognize it. I have used font squirrel to convert the fonts, and I have placed the .eot file and .otf file in a folder called "fonts" Here is my CSS:
#font-face {
font-family: BebasNeue;
src: url('fonts/BebasNeue.eot');
src: url('fonts/BebasNeue.otf') format("opentype");
}
UPDATE
So through suggestions from below, I was led to this site: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
I used the CSS:
#font-face {
font-family: 'BebasNeue';
src: url('fonts/bebasneue.eot'); /* IE9 Compat Modes */
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/bebasneue.woff') format('woff'), /* Modern Browsers */
url('fonts/bebasneue.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/bebasneue.svg#svgBebasNeue') format('svg'); /* Legacy iOS */
}
Then I went back to Font Squirrel, downloaded the kit fresh again, and renamed everything correctly, and it worked.
You need to set Access-Control-Allow-Origin HTTP Header for this
See here:
IE9 blocks download of cross-origin web font
Does this work?
#font-face {
font-family: 'BebasNeue';
src: url('fonts/BebasNeue.eot');
src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue.otf') format("opentype");
}
On Fontsquirrel they do it this way
http://www.fontsquirrel.com/fontfacedemo/bebas-neue
Download the #font-face kit from there
#font-face {
font-family: 'BebasNeueRegular';
src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot');
src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.woff') format('woff'),
url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.ttf') format('truetype'),
url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
This code should make it work..
if not, check your font URL (if it exists).
#font-face {
font-family: 'BebasNeue';
src: url('fonts/BebasNeue.eot');
src: local('BebasNeue'), local('BebasNeue'), url('fonts/BebasNeue.eot') format('embedded-opentype');
}
Sometimes when you convert font type (other that TTF) the font doesn't work.. Try to use TTF font and convert it..
I didn't experience that with TTF fonts.. but i did with other font types.
This is the css I have for Bebas on our site (not Neue), but note the URL:
#font-face {
font-family: 'Bebas';
src: url('../fonts/bebas-webfont.eot');
src: url('../fonts/bebas-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bebas-webfont.ttf') format('truetype'),
url('../fonts/bebas-webfont.svg#bebasregular') format('svg');
font-weight: normal;
font-style: normal;
}