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;
}
Related
I think the title already says what my problem is.
Here's my code, I hope you can tell what I'm doing wrong:
#font-face {
font-family: 'Deer';
src: url('fonts/Deer.eot') format('embedded-opentype');
src: url('fonts/Deer.woff') format('woff'),
url('fonts/Deer.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
IE is downloading the ttf and woff files but not the eot, and firefox is downloading none of them...
try with
#font-face {
font-family: 'Deer';
font-weight: normal;
font-style: normal;
src: url('fonts/Deer.woff') format('woff'),
url('fonts/Deer.eot') format('eot'),
url('fonts/Deer.ttf') format('ttf');
}
i dont think more than 1 src-argument is allowed in #font-face.
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
#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 using a font called samarn in my website. The font looks good in Firefox and Google Chrome but in IE, it does not show.
My code is:
#font-face {
font-family: 'SamarkanNormal';
src: url('../fonts/samarn.eot');
src: url('../fonts/samarn.eot?#iefix') format('embedded-opentype'),
url('../fonts/samarn.woff') format('woff'),
url('../fonts/samarn.ttf') format('truetype'),
url('../fonts/samarn.svg#samarn') format('svg');
font-weight: normal;
font-style: normal;
}
#name {
font-family:'SamarkanNormal';
}
try with
#font-face {
font-family: 'font';
src: url('font.eot');
src: local('☺'),
url('font.otf') format('opentype');
}
more here: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
maybe try with some other (than fsq) font-face generator, fe. http://fontface.codeandmore.com/
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;
}