Why doesn't this #font-face style apply to my HTML? - css

I am hoping someone can please point out what's not working about this font-face implementation. I've testing this using the body tag so there's no question as to whether the issue is with the HTML (yes, I do have a body tag.)
I have obtained the fonts and the implementation CSS from FontSquirrel. Thanks for looking at this!
CSS:
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('DymaxionScript-webfont.eot');
src: url('DymaxionScript-webfont.eot?#iefix') format('embedded-opentype'),
url('DymaxionScript-webfont.woff') format('woff'),
url('DymaxionScript-webfont.ttf') format('truetype'),
url('DymaxionScript-webfont.svg#DymaxionScriptRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: DymaxionScriptRegular, courier;
}
File tree structure:
Screenshot of Courier fallback font:
Answer: Apparently if one leaves "Regular" off of the font-family declaration, everything works fine. Answered my own question by playing with it.
Real Answer: My first "answer" only worked in Safari. What worked in all of them was changing "'DymaxionScript-webfont..." to '../DymaxionScript-webfont... After I did that, everything worked. It was bad pathing.

Here is a more concise #font-face implementation, that I know works across the board:
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('/path/to/font/webfont.eot?') format('eot'),
url('/path/to/font/webfont.woff') format('woff'),
url('/path/to/font/webfont.ttf') format('truetype'),
url('/path/to/font/webfont.svg#webfont') format('svg');
font-weight:normal;
font-style:normal;
}

For various web fonts you can check out google.com/webfonts which has a bunch of different fonts for use, but you just add a link to google's site and it will return the proper formatting for most browsers as far back as ie6

#font-face {
font-family: 'DymaxionScriptRegular';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: DymaxionScriptRegular, courier;
}

Related

'Gotham Book' font-family not working in Safari browser and IPhone devices

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

Custom font is not working in Firefox.

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';
}

Custom fonts not working in ie 8 and below

My custom fonts aren't rendering in ie8.
I've allready tried clearing the cache, and I'm also sending the correct filetypes if I'm not mistaken.
What am I missing here?
#font-face {
font-family: 'Lobster';
src: url('fonts/lobster.eot');
src: url('fonts/lobster.eot') format('embedded-opentype'),
url('fonts/lobster.woff') format('woff'),
url('fonts/lobster.ttf') format('truetype'),
url('fonts/lobster.svg#Lobster1.4Regular') format('svg');
}
.logoHome{color:#FFF; font: 58px Lobster, serif; text-decoration:none; line-height:58px;}
the problem it is easy solve, just make the url path to be relative:
#font-face {
font-family: 'Lobster';
src: url('http://www.sample.com/fonts/lobster.eot');
src: url('http://www.sample.com/fonts/lobster.eot?#iefix') format('embedded-opentype'),
url('http://www.sample.com/fonts/lobster.woff') format('woff'),
url('http://www.sample.com/fonts/lobster.ttf') format('truetype'),
url('http://www.sample.com/fonts/lobster.svg#Lobster13Regular') format('svg');
font-weight: normal;
font-style: normal;
}
but this will only work down to IE8 you can use this caniuse.com to always check which thing you can use in older browsers
The first line gave an error.
Removing:
src: url('fonts/lobster.eot');
Did the trick.

Custom font not appearing correctly on Chrome

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/

#font-face is not working in IE7

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');
}

Resources