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
Related
I've been supplied an OTF font from a client and not following the web font trends for a while now in terms of support, if I remember correctly, the pattern used for cross browser support for web fonts would look like this:
#font-face {
font-family: 'AvalonBook';
src: url('Avalon-Book-webfont.eot');
src: url('Avalon-Book-webfont.eot?#iefix') format('embedded-opentype'),
url('Avalon-Book-webfont.woff') format('woff'),
url('Avalon-Book-webfont.ttf') format('truetype'),
url('Avalon-Book-webfont.svg#AvalonBook') format('svg');
font-weight: normal;
font-style: normal;
}
Probably because I've been so used to copying and pasting the above code and modifying it to my needs, I haven't got the chance to actually understand the reasons behind this pattern.
This begs the question, is OTF even supported in the browsers? What browsers and versions? Also why is it not in the above #font-face declaration if it is supported?
Thanks.
I've been using Source Sans Pro and Source Code Pro on my sites, and it looks great in Safari and Chrome. In Firefox, however, it looks like the wrong font weight is being used, as the weight is much lighter (and harder to read) in Firefox. My #font-face declarations look like this:
#font-face {
font-family: 'Source Sans Pro';
src: url('/fonts/sourcesanspro-regular-webfont.eot');
src: url('/fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/sourcesanspro-regular-webfont.woff') format('woff'),
url('/fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
url('/fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Source Sans Pro';
src: url('/fonts/sourcesanspro-light-webfont.eot');
src: url('/fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/sourcesanspro-light-webfont.woff') format('woff'),
url('/fonts/sourcesanspro-light-webfont.ttf') format('truetype'),
url('/fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
font-weight: lighter; // light
font-style: normal;
}
See the file for the full declaration. Is there something about my declarations that causes Firefox to select the wrong file when displaying the normal size?
As pointed out in this answer, it looks as though Firefox uses the last declared #font-face for a given style to display the content. The last face I had defined for the normal style had a weight of light, so that was the one Firefox used. The solution is to use the numeric weights in the #font-face declarations, as I have now done here. Then it properly uses the normal weight where appropriate.
Chrome and Safari use webkit as their rendering engine. (Chrome has now moved to Blink that uses a subset of webkit). Firefox on the other hand uses gecko. So yeah, that's pretty much the reason why we need to test webpages with different browsers.
As for your question, I guess this will help: http://css-tricks.com/forums/topic/font-rendering-ugly-in-firefox-but-beautiful-in-webkit/
#font-face {
font-family: 'advertisingmediumregular';
src: url('fonts/advertisingmedium-webfont.eot');
src: url('fonts/advertisingmedium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/advertisingmedium-webfont.woff') format('woff'),
url('fonts/advertisingmedium-webfont.ttf') format('truetype'),
url('fonts/advertisingmedium-webfont.svg#advertisingmediumregular') format('svg');
font-weight: bold;
font-style: normal;
}
the text disappear in google chrome when I wrote this code can anyone help me please
I already had the same problem. I was adviced to generate my web fonts with a tool like the FontSquirrel webkit fonts generator. Upload your font's files and download back a all browsers compatible pack. Include the css in your HTML page in addition to yours. And it seems to work since I do like this. I hope it will be the same for you.
Are .eot fonts supported via #font-face datauri on IE8?
Are datauris on IE8 supported only for images?
I know about the 32KB limitation. My base64 representation of the .eot font does not exceed this limit.
My css declaration goes something like this:
#font-face {
font-family: 'MyFont';
src: url(data:font/opentype;base64,B1QAAB9TAAACAAI.....);
font-weight: normal;
font-style: normal;
}
Data URIs should not be any issue for this...
...It should work, I have my .eot web font that works in all browsers (even IE7) by using this...but I also use WOFF/TTF/SVG also to support the rest of the browsers
#font-face {font-family: 'AllyourBase';
src: url('/fonts/allyourbase.eot');
src: url('/fonts/allyourbase.eot?#iefix') format('embedded-opentype'),
url('/fonts/allyourbase.woff') format('woff'),
url('/fonts/allyourbase.ttf') format('truetype'),
url('/fonts/allyourbase.svg?#allyourbase') format('svg');
font-weight: normal;
font-style: normal;
}
Make sure IIS has the correct mime type on your local/web server (EX: application/vnd.ms-fontobject for .eot files).
Lastly....I doubt Datauri is the cause but to play it safe try without data/base64 and see if it does anything
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.