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.
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 am using some fonts generated from FontSquirrel but it doesn't seem to that IE can't handle the fonts.. What am I doing wrong? This is not a public webpage.. It is builded to work on a local platform until I am ready to launch, that's why the domain name ends on .local.
#font-face {
font-family: 'proxima_light';
src: url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.eot');
src: local('proxima_light'), url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.woff') format('woff'),
url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.ttf') format('truetype'),
url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.svg#proxima_nova_ltregular') format('svg');
font-style: normal;
}
#font-face {
font-family: 'proxima';
src: url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.eot');
src: local('proxima'), url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.woff') format('woff'),
url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.ttf') format('truetype'),
url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'proxima';
src: url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.eot');
src: local('proxima'), url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.woff') format('woff'),
url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.ttf') format('truetype'),
url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.svg#proxima_nova_ltbold') format('svg');
font-weight: bolder;
font-style: normal;
}
As I said.. it is only IE that doesn't handle the font-face.. Every other browser does it well..
I'm not sure if this'll help, but IE has some similar cross-domain issues as FF. In this case, it might be that your absolute URL is making IE think your font is being served from a different domain. Have you tried using a relative path?
Does Dev Console return error on laod the font files, also could you please provide of the Responce Header of the font file.
I've faced with issue in IE 9 when it didn't use font file in case if Responce header contained Cache-Control: no-cache
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 font-face that is working across all my target browsers except for IE6
#font-face {
font-family: 'AFC-Bold';
src: url('metaactionforchildren-bold.eot');
src: url('metaactionforchildren-bold.eot?#iefix') format('embedded-opentype'),
url('metaactionforchildren-bold.woff') format('woff'),
url('metaactionforchildren-bold.ttf') format('truetype'),
url('metaactionforchildren-bold.svg#metaactionforchildren-bold') format('svg');
font-weight: normal;
font-style: normal;
}
Any ideas?
It is not properly supported.
See: http://caniuse.com/#feat=fontface
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;
}