I'm working on a website with a font I uploaded. It works fine in all browsers but in Firefox and IE, when I add www. to the url in the browser, the font doesn't show up? Does anyone know what's up?
This is my CSS declaration:
#font-face {
font-family: 'ITCAvantGardeGothicProDemi';
src: url('../fonts/itcavantgardepro-demi-webfont.eot');
src: url('../fonts/itcavantgardepro-demi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/itcavantgardepro-demi-webfont.woff') format('woff'),
url('../fonts/itcavantgardepro-demi-webfont.ttf') format('truetype'),
url('../fonts/itcavantgardepro-demi-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
Thanks for the help!
Related
I integrated a font into my web project. Here comes the CSS code:
#font-face {
font-family: 'vladimirscriptefregular';
src: url('fonts/vladimirscriptef-webfont.eot');
src: url('fonts/vladimirscriptef-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/vladimirscriptef-webfont.woff') format('woff'),
url('fonts/vladimirscriptef-webfont.ttf') format('truetype'),
url('fonts/vladimirscriptef-webfont.svg#vladimirscriptefregular') format('svg');
font-weight: normal;
font-style: normal;
}
My problem is that the font is not displayed in Firefox - instead, Times New Roman is displayed. In all other browsers the font is displayed correctly.
Does anyone see what's missing in my code?
Try the code below:
#font-face {
font-family: 'vladimirscriptefregular';
-moz-font-family:'vladimirscriptefregular';
src: url('fonts/vladimirscriptef-webfont.eot');
src: url('fonts/vladimirscriptef-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/vladimirscriptef-webfont.woff') format('woff'),
url('fonts/vladimirscriptef-webfont.ttf') format('truetype'),
url('fonts/vladimirscriptef-webfont.svg#vladimirscriptefregular') format('svg');
font-weight: normal;
-moz-font-weight:normal
font-style: normal;
-moz-font-style:normal
}
Firefox has a list of fonts which can be used in its whitelist.
It can be accessed by typing "about:config" in the address bar.
Then search for "font.system.whitelist".
Here add your font name which must be present in the Font folder.
For windows the default location is "C:\Windows\Fonts"
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';
}
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 downloaded a font and generated font-face css using font-squirrel.
The font is displayed properly in IE,Opera but in chrome , firefox & safari it looks small and something totally different...
Is there anything that i need to change ??
#font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-regular-webfont.eot');
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('myfonts/lekton-regular-webfont.woff') format('woff'),
url(myfonts/lekton-regular-webfont.ttf) format('truetype'),
url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg');
font-weight: normal;
font-style: normal;
}