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.
Related
In my project I need to use Gotham Book font-family and I am using following code:
#font-face {
font-family: 'Gotham Book';
src:
url('assets/fonts/Gotham-Book.eot'),
url('assets/fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/Gotham-Book.woff2') format('woff2'),
url('assets/fonts/Gotham-Book.woff') format('woff'),
url('assets/fonts/Gotham-Book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
If perfectly works in android devices and other browsers except safari browser.
Please suggest what is the wrong in my code.
What causing this issue?
I also tried with Gotham Book svg import, but did not worked for me.
Thank You in advance!
This is the working Solution
CSS :
#font-face {
font-family: "gotham";
src: url('ff/Gotham-Book.woff') format('woff'),
url('ff/Gotham-Book.woff2') format('woff2'),
url('ff/Gotham-Book.ttf') format('truetype');
font-weight: normal;
}
and Please replace your existing font by downloading font from below URl:
https://drive.google.com/open?id=1pbdpXbPRCJC6Qi-QpNGt7WbLuwtwDRUW
Thanks
Try adding the whole URL of the font assets.
CSS:-
#font-face {
font-family: 'Gotham Book';
src:
url('https://www.example.com/assets/fonts/Gotham-Book.eot'),
url('https://www.example.com/assets/fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
url('https://www.example.com/assets/fonts/Gotham-Book.woff2') format('woff2'),
url('https://www.example.com/assets/fonts/Gotham-Book.woff') format('woff'),
url('https://www.example.com/assets/fonts/Gotham-Book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Thanks
I embedded fonts to a website via #font-face. My code works in Chrome and Safari, but not in Firefox and I don't know why. The fonts are hosted by the same domain and I also put them in the root directory already.
That's the code:
#font-face {
font-family: 'Effra';
src: url('font/Effra-Regular.eot');
src: url('font/Effra-Regular.otf') format('opentype'),
url('font/Effra-Regular.svg') format('svg'),
url('font/Effra-Regular.eot') format('truetype'),
url('font/Effra-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Change your font to:
#font-face {
font-family: 'Effra';
src: url('font/Effra-Regular.eot') format('embedded-opentype');
src: url('font/Effra-Regular.otf') format('opentype'),
url('font/Effra-Regular.svg') format('svg'),
url('font/Effra-Regular.ttf') format('truetype'),
url('font/Effra-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Change font extension .eot to .ttf and include another font file with extension .ttf
#font-face {
font-family: 'Effra';
src: url('font/Effra-Regular.eot');
src: url('font/Effra-Regular.otf') format('opentype'),
url('font/Effra-Regular.svg') format('svg'),
url('font/Effra-Regular.ttf') format('truetype'),
url('font/Effra-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#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 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');
}