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;
Related
My question should be strange but it has it's own sense.
My web browser is not compatible with woff format, and is not Internet explorer but a modified version of IE for sure.
This web browser is running by an hmi application based on TIA Portal (siemens), with this browser I need to look, using siemens web browser, an html page generated by one vision system.
This video system is using an icon font in woff format, and is not compatible with my web browser.
My idea was that to convert the font in ttf and install it locally on pc, but this don't work on my pc and olso in the hmi (hmi is running a windows 7 embedded version) and I don't understand why it doesn't work in each pc!
the css generated by the sensor is this:
#font-face {
font-family: 'fontello';
src: url('fontello.eot?60611638');
src: url('fontello.eot?60611638#iefix') format('embedded-opentype'),
url('fontello.wof?60611638') format('woff'),
url('fontello.svg?60611638#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
Obviously i cannot change the generated html.
Why the browser don't use the font converted and installed locally??
Your #font-face rule is missing a .ttf url, as well as a local reference
Try this:
#font-face {
font-family: 'fontello';
src: local('fontello'),
url('fontello.ttf') format('truetype'),
url('fontello.eot#iefix') format('embedded-opentype'),
url('fontello.woff') format('woff'),
font-weight: normal;
font-style: normal;
}
See also: MDN Docs: #font-face
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'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.
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.
Check the site:
http://tinyurl.com/caljnqb
I'm using font-face:
#font-face {
font-family: 'SegoeUI';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: 'SegoeUIBold';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg');
font-style: normal;
font-weight: bold;
}
#font-face {
font-family: 'SegoeUIItalic';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg');
font-style: italic;
font-weight: normal;
}
And there is the problem with output in Firefox, Chrome and Opera browsers. Everything looks OK on IE. Font looks sharp. Why does it happens? Maybe I'm doing something wrong?
different browsers render fonts differently.
The solution I've used in the past is to re-arrange the order in which the fonts are supplied to the font face, based on which browser is rendering the page. Usually my problems are in the earlier versions of IE so I've used a separate style sheet that offered the .woff file before the ttf file. Because some browsers can only read certain font type files but can read both and stop looking after finding one that works. If you re-arrange them you may be able to use one that renders a bit better.
If you end up using separate css you can use the $_SERVER arrays http_user_agent property to set a font css based on the browser.
googles Droid font is a font that renders funny sometimes depending on the browser as well so researching that might help you find other approaches.
It seems that there are a few tricks in ordering properly each format
See for example
This is the Fontspring bulletproof syntax modified to serve the svg
first:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
From http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
You may also take care of using the proper mime type for WOFF font , as of http://www.w3.org/TR/WOFF/#appendix-b
application/font-woff
to ensure proper handling by the browser