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!
Related
I've got a problem with fonts, exactly with "#font-face".
When i tried to run this local HTML page, all fonts worked, but now when i try to run online HTML page, only one font is working.
now i have two fonts, one work, and one other doesn't
CSS :
#font-face {
font-family: 'RemachineScript';
src: url(fonts/SCRIPTIN.ttf);
}
#font-face {
font-family: 'Quicksand';
src: url(fonts/Quicksand.otf);
}
header#subheader div.title {
font-family: 'RemachineScript';
}
header#subheader p.subheader {
font-family: 'Quicksand';
}
You can see the HTML at http://gspinaci.com/
The URLs are right, because they are in the same folder. What can I do?
The console says there is no Quicksand.otf file, be sure of two things, first, that the file is there and the name is exactly the same (case sensitive) and the second this is that your font-face call is very specific, use the webkit font that you can download from font squirrel here: http://www.fontsquirrel.com/fonts/Quicksand
and be sure to paste in you CSS file the WHOLE font-face call, like this:
#font-face {
font-family: 'triplex';
src: url('fonts/triplexsans-light-webfont.eot');
src: url('fonts/triplexsans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/triplexsans-light-webfont.woff') format('woff'),
url('fonts/triplexsans-light-webfont.ttf') format('truetype'),
url('fonts/triplexsans-light-webfont.svg#triplexlight') format('svg');
font-weight: normal;
font-style: normal;
}
And remember to include all font format files, not only .otf.
EDIT
You do not need to configure your server, you only need to modify your .htaccess file, add this lines to it:
AddType application/vnd.ms-fontobject eot
AddType font/opentype otf
AddType font/truetype ttf
AddType application/x-font-woff woff
check this answer: #font-face issue
What you have in accepted answer is not nearly close to bulletproof;)
you can also try out my little converter http://freedockstar.com/fontface/
also i'm not sure if you need to set mime types for fonts. It works just fine from my server without it. Every font is server as text/html and there are no problems. you define type in css, and that seams to be enough ;)
you need to add:
format (truetype)
or
format (opentype)
or someone else after src attribute
#font-face{
font-family: 'RemachineScript';
src: url(fonts/SCRIPTIN.ttf) format (truetype);
}
you can find format type in fonts ttf file
Maybe is too late, but for the record... I solved this issue by granting read permission on the .ttf file.
chmod +r font.ttf
Hello,
I am working on adding Font Awesome to my website.
On the Font Awesome github page it says simply:
"Install FontAwesome.otf and visit the copy & paste page. Happy designing"
Please can someone advise me - do I need to install all those other files that come in the folder downloaded from github? Those other files being:
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
Thank you
Yes :) I would install all of them. They are font files for different browser support.
Upload the files to your website and use #font-face in CSS
http://www.font-face.com/
This ensures the most amount of users will be able to see your font.
Here's an example:
#font-face {
font-family: 'myFont';
src: url('includes/fonts/DejaVuSans-webfont.eot');
src: url('includes/fonts/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/LDejaVuSans-webfont.woff') format('woff'),
url('includes/fonts/DejaVuSans-webfont.ttf') format('truetype'),
url('includes/fonts/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg');
font-weight: normal;
font-style: normal;
}
body{ font-family: myFont, arial; }
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
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
I am trying to embed my custom font in my website, got a link folder from http://www.fontsquirrel.com/fontface/generator this site after uploading a font on this site, it gives me this CSS:
#font-face {
font-family: 'VoltaEFTU-Regular';
src: url('voltaeftu-regular-webfont.eot');
src: local('☺'),
url('voltaeftu-regular-webfont.woff') format('woff'),
url('voltaeftu-regular-webfont.ttf') format('truetype'),
url('voltaeftu-regular-webfont.svg#webfonttKmU3jX8') format('svg');
font-weight: normal;
font-style: normal;
}
But it's not working on my machines. How can I embed a font in my website?
Thanks
Mayur Mate
If I were doing it, I would take a look at how the Google Font API works…
#font-face code looks correct, but if you want use this font example in <p> you must use font-family: 'VoltaEFTU-Regular'; in this element. Look into generated demo.html file.