So firefox doesn't want to load my fonts, the path is right I also so the request in Firebug, but it won't render it. On other browser it works perfect, here is my code:
#font-face {
font-family: 'Gill Sans';
src: url('/fonts/gillsansstd-webfont.eot');
src: local('☺'), url('/fonts/gillsansstd-webfont.woff') format('woff'), url('/fonts/gillsansstd-webfont.ttf') format('truetype'), url('/fonts/gillsansstd-webfont.svg#webfontCBlAmwSC') format('svg');
font-weight: normal;
font-style: normal;
}
I'm using wordpress and site address is set to www.site.com si i've read that on www. sites firefox won't render the fonts or something like that.Do you know a solution or something?
Solved when you link the css file just do /path/to_the_file
For some people, probably not your case because you solved it already, if the font extension is correct the problem could be on the MIME type extension, if you are using IIS be sure to tell him the MIME type or you are gonna face a nice 404
Related
I'm using #font-face on my site and it does not work, 404 error on the .woff file. I have the fonts located at the root but could not find fonts
this is my font css file what is problem?
#font-face {
font-family: '---_2regular';
src: url('----regular-webfont.eot');
src: url('----regular-webfont.eot?#iefix') format('embedded-opentype'),
url('----regular-webfont.woff') format('woff'),
url('----regular-webfont.ttf') format('truetype'),
url('---regular-webfont.svg#---_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
You must contact your Hosting company. Then They must add .woff extension to mime types.
Possible, your problem can been solved.
All you can read about woff and having them on your site:
http://www.google.com/fonts
Ensure your fonts located in the same directory as the css file, unless you have specified a path otherwise.
Give http://www.fontsquirrel.com/tools/webfont-generator a try, it gives an example HTML page with the font embedded, hopefully it should point you in the right direction!
I have this embedded font face in the CSS of a web page that I am developing:
#font-face {
font-family: 'myfont';
src: url('fonts/myfont.eot');
src: url('fonts/myfont.woff') format('woff'), url('fonts/myfont.ttf') format('truetype'), url('fonts/myfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
And further down in the CSS file I use the font:
#finder-entry-container h1
{
font-family:'myfont', Sans-Serif;
font-size:28px;
color:white;
font-weight:normal
}
When I use this font on a web page, it renders perfectly fine in Chrome and Firefox. However, in IE I receive this error:
CSS3111: #font-face encountered unknown error.
myfont.eot
Even stranger; the page renders just fine when browsed from the local file system (I am using a simple HTML file to troubleshoot this issue.)
Has anyone else had an issue like this? I know the fonts work fine because I can browse them from the local file system, so I don't think it is a file conversion issue. My web server is running IIS 6; I checked the headers for all of the fonts and these are the MIME types that they are returning:
myfont.eot returns application/octet-stream
myfont.woff returns application/font-woff
myfont.ttf returns application/octet-stream
myfont.svg returns image/svg+xml
When moving into a directory include the ./ to move into your fonts directory
Try formatting your #font-face declaration like this...
#font-face {
font-family: 'myfont';
src: url('./fonts/myfont.eot'); /* IE9 Compat Modes */
src: url('./fonts/myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/myfont.woff') format('woff'), /* Modern Browsers */
url('./fonts/myfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/myfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Just add '?#iefix' after .eot
src: url('myfont.eot?#iefix') format('embedded-opentype');
According to Github Font Awesome Wiki the solution is to "remove all occurrences of
?v=4.x.y
from the #font-face property in the font-awesome.css". Which if you are using LESS, means changing the /less/fa/path.less file.
This is quite confusing to me. I am using font-squirrel to download a web kit to show a custom font. here is the link to font: http://www.fontsquirrel.com/fontfacedemo/League-Gothic
If you look at the homepage right now: http://www.simonsayswebsites.com/
the main text in the middle says "Custom Built Websites Designed To Get You More customers". It looks great in chrome, exactly as it should, but if you look at it in either firefox or IE, the custom font face does not work.
Here's the CSS generating the font-face:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Anyone have any ideas? I looked at many cases on this all ready, but I don't see one that relates to my case as I thought I have included all the different necessary files for each browser and have them uploaded to their respected places.
Poking around I found this interesting tidbit for Firefox:
Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers.
Try changing those font URLs to relative and see if that helps:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
url('/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
url('/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
edit: see Korpela's answer; the problem was the mismatch from the 'www' subdomain. You should probably keep the URLs relative, though.
The reason for the problem is (was) the use of a font across domains. A URL that starts “http://simonsayswebsites.com” is treated as being in a different domain than “http://www.simonsayswebsites.com” even though the two domain names may refer to the same computer.
Switching to a relative URL helped because then the domain is the same. But despite rumors to the contrary, Firefox does not reject absolute URLs in #font-face. I have set up a trivial demo to show this.
Presumably, the rumors have originated from cases like this: if switching to a relative URL helps, it is natural to assume that the type of URL was the issue.
I had your problem too and searched a lot about it but came up with nothing...
so i started experimenting on my CSS for some minutes and finally realized that i had duplicated font family names, I had been declaring below code in both my theme and layout page:
<style type="text/css" media="screen, print">
#font-face
{
font-family: 'foo';
src: url('~/Assets/fonts/foo.woff') format('woff'),
url('~/Assets/fonts/foo.ttf') format('truetype'),
url('~/Assets/fonts/foo.eot') format('eot');
}
</style>
I just needed to remove one of them and my code worked fine in all three browsers!
one more point is that just removing the line containing "font-family: 'foo';" parts will do the trick!
I have set up a website. I was hosting it on webs.com, but they started to place an ad bar on html-only hosting. As it would not look good, I changed it to 000webhost. Since I uploaded everything to 000webhost, I can't make the fonts to load.
webs:
http://bluescreen-ofdeath.webs.com/
000webhost:
http://bsod.comze.com/
I have tried pointing the ttf fonts from my webs account, but it won't load.
As the 000webhost take a day to answer free accounts, I decided to ask you. Is there anything I am missing?
Edit: Here is an example of my #Font-face
#font-face {
font-family: 'fixedsys500c-webfont';
src: url('../font/fixedsys500c-webfont.eot');
src: url('../font/fixedsys500c-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/fixedsys500c-webfont.woff') format('woff'),
url('../font/fixedsys500c-webfont.ttf') format('truetype'),
url('../font/fixedsys500c-webfont.svg#fixedsys500c-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
The font(s) have to be imported before the stylesheet, as Google Web Fonts dictate.
Instructions: To embed your Collection into your web page, copy the
code as the first element in the <head> of your HTML document.
Don't use single quotes. Your fonts will work nicely. It's so easy, look below:
#font-face {
font-family:Arial;
src:url(Arial.ttf)format(.ttf);
}
remind it, internet explorer only works with EOT font files.
As far as I can tell, 000webhost only accepts .woff files.
.ttf and .eot do not work for me
I've built a custom wordpress theme that uses font-face for typography. All works fine when running in localhost, but after uploading the theme to a live site, font-face fails in FF. Still works fine in IE9
I've tried hardcoding the CSS link in header.php, moving the font files out of the theme to the site root, using a separate stylesheet for the #font-face declaration, but nothing wants to work.
Any ideas?
Cheers
Nathan
Did you include all the font files necessary? Different browsers support different types. For example, here's one I used on a site recently:
font-face {
font-family: 'GentiumBookBasicRegular';
src: url('_/fonts/GenBkBasR-webfont.eot');
src: url('_/fonts/GenBkBasR-webfont.eot?#iefix') format('embedded-opentype'),
url('_/fonts/GenBkBasR-webfont.woff') format('woff'),
url('_/fonts/GenBkBasR-webfont.ttf') format('truetype'),
url('_/fonts/GenBkBasR-webfont.svg#GentiumBookBasicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
A fantastic resource for this is http://fontsquirrel.com - they'll even let you upload fonts that they don't have and they'll create the package and the css for you.