I'm having a problem with my fonts on server, in Chrome everything look great, but in Mozilla and IE font is not loaded.
I understand that problem is in Apache configuration. But I tried all solutions with adding mime types to .htaccess, to mime.type and apache2.conf; added mod_headers settings to .htaccess - nothing helped.
What could be the problem?
My CSS code is:
#font-face {
font-family: 'ProximaNovaCond-Reg';
src: url('../fonts/ProximaNovaCond-Reg.eot');
src: url('../fonts/ProximaNovaCond-Reg.woff') format('woff'),
url('../fonts/ProximaNovaCond-Reg.ttf') format('truetype'),
url('../fonts/ProximaNovaCond-Reg.svg') format('svg');
font-weight: normal;
font-style: normal;
}
URL: http://demo2.even.lv/
Thanks.
Related
I want my friend to able to check out my WIP site that I've been developing locally using Chrome (localhost/sitename/, or now actually myIP/sitename). I got it to work and realized my fonts weren't loading, and then checked all my other browsers on my computer and noticed the same thing.
I've done absolute paths and even tried adding permissions to the .htaccess file to no avail. Below is my code. Any suggestions? Nothing is live yet.
#font-face {
font-family: 'arvo';
src: url('/arvo-regular-webfont.eot');
src: url('/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/arvo-regular-webfont.woff') format('woff'),
url('/arvo-regular-webfont.ttf') format('truetype'),
url('/arvo-regular-webfont.svg#arvo') format('svg');
font-weight: normal;
font-style: normal;
}
I have implemented #font-face for a number of fonts on a website. This is an asp website hosted on IIS7. Currently I am testing with FF23, Chrome, IE8/9/10. I am having some difficulties with the fonts in IE. When I am not accessing the webpage from my server the fonts will render properly on FF and Chrome, however on all the IE browsers they will not. When I am accessing the website on the server(2008 r2) I am using the same URL(fully qualified domain name). When I am accessing not on the server I am using the same fully qualified domain name. Both the fonts and the website are hosted on the same machine(same domain). There are no errors thrown by #font-face in FF or Chrome, not sure how to check in ie.
#font-face {
font-family: 'sf_movie_posterregular';
src: url('./fonts/customtitle-webfont.eot');
src: url('./fonts/customtitle-webfont.svg#sf_movie_posterregular') format('svg'),
url('./fonts/customtitle-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/customtitle-webfont.woff') format('woff'),
url('./fonts/customtitle-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Add woff as a mine type to IIS. (.woff, application/font-woff)
Go to IIS Manager, and select your website, and choose MIME Types from the right.
After adding 'local' to the fonts, it worked accross all browsers.
#font-face {
font-family: 'sf_movie_posterregular';
src: url('./fonts/customtitle-webfont.eot');
src: local( 'sf_movie_posterregular'),
url('./fonts/customtitle-webfont.svg#sf_movie_posterregular') format('svg'),
url('./fonts/customtitle-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/customtitle-webfont.woff') format('woff'),
url('./fonts/customtitle-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
I am working on a webfonts server and I got the api to spit out the css with the correct mime types.They are also getting linked to the page.
#font-face {
font-family: 'Pagul';
src: url('http://localhost:5000/api/webfonts/static/Pagul.eot');
src: local('☺'), url('http://localhost:5000/api/webfonts/static/Pagul.woff') format('woff'),
url('http://localhost:5000/api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
The ttf,eot files can be downloaded manualy using the links, for some reason these fonts are
not loaded by the browser what am I doing wrong here ? The font files dont have proper mimetypes is that the issue ?
I tried font-squirells syntax also,it's not working.
PS: The Css is dynamically generated and added to the head ?
Use relative paths instead of absolutes. For example, if your CSS is in site/css/style.css and your fonts are in the site/api/webfonts/static/ directory:
#font-face {
font-family: Pagul;
src: url('../api/webfonts/static/Pagul.eot');
src: url('../api/webfonts/static/Pagul.woff') format('woff'),
url('../api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Alternatively, use a service like Google Fonts and either link their CSS on your HTML or import it directly into your CSS
I rely heavily on Google Webfonts for my site and (unfortunatly) google chrome presents them badly, i have set font-smooth to always, but it dosen't seem to help.
EXAMPLES:
Is there any way i could smooth them / make them look better??
Thanks,
Font rendering problems are common in GChrome, try changing the order of your #font-face sources... Chrome utilises the .svg file in the #font-face sources, in some reason it doesn´t tolerate .svg being called last in the list
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
url('../fonts/my-dirty-font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
If the order #font-face order looks similar then try changing to
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.svg') format('svg');
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Personally I would use
http://www.fontsquirrel.com/
It's all hosted on your server and it's compatible with nearly every browser! Since using Font Squirrel I haven't looked elsewhere.
I have tried reading multiple articles on how to deal with custom fonts in IE, but they never seemed to work for me. I tried converting the fonts to EOT, but that didn't seem to work either. I am not sure what I am doing wrong, so I will post my code
#font-face {
font-family: "Klavika Regular";
src: url('../fonts/klavika.eot');
src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
font-weight: normal;
font-style: normal;
}
this works in ie8/9
http://dev.bowdenweb.com/a/fonts/serif/alegreya/demo.html
#font-face {
font-family: 'AftaserifRegular';
src: url('AftaSerifThin-Regular-webfont.eot');
src: url('AftaSerifThin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('AftaSerifThin-Regular-webfont.woff') format('woff'),
url('AftaSerifThin-Regular-webfont.ttf') format('truetype'),
url('AftaSerifThin-Regular-webfont.svg#AftaserifRegular') format('svg');
font-weight: normal;
font-style: normal;
}
if IE8 thinks it supports any other format other than eot of the ones listed below, then it will probably try to use that one. Maybe you could use a IE8 hack, like
src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
src /*\**/: url('../fonts/klavika.eot')\9
so only IE8 will read the last src line and thus load the .eot.
Try three kinds of CSS Formats for #font-face on FontSquirrel Generator (in "EXPERT..." mode > in section "CSS Formats:" > "more information")
It's worth checking to see if your .htaccess file allows the file type.