I am using a wordpress, i use the Font Face tag in css file for custom fonts, it is working in all browser but not in IE please help me
Thanks
IE8 and lower don't support #font-face if your font is not in .EOT file format.
Assuming IE has a developer tool like Firefox and Chrome, hit F12 and select the CSS tab. Maybe your style is being overwritten somewhere or maybe IE is just a POC (I suspect the latter).
Like others have said. #font-face is a CSS3 attribute not supported by most older browsers. I would suggest using something like Font Squirrel to make it work with older browsers.
http://www.fontsquirrel.com/fontface/generator
Also more about #font-face
http://www.w3.org/TR/css3-fonts/#font-face-rule
Related
Working on the following site:
Markup Medya
If you look at the header, there is header text which displays fine on Firefox and chrome, but in IE 10 it shows very small. Not sure what s wrong there and need help with that.
This is a font issue. You have several #font-face declarations in your CSS, but you are only specifying font files in the the .woff format.
This will give you an issue in more than just IE.
Please note that in order to support all browsers, you will need to supply your fonts in several formats -- to cover all the browsers in common use you'll need .eof, .woff, and .ttf formats.
See this Bulletproof #font-face article for more detailed discussion of which browsers support which formats and how to write your #font-face declarations in order to get the best possible cross-browser coverage.
If you haven't got your fonts in all the required formats, you can use a tool like FontSquirrel to help you.
Here's the Firefox (Gecko) screenshot [full size]:
And here's the Epiphany (WebKit) screenshot [full size]:
Is there anything I can do to make it look nice in Firefox (Gecko)?
I'm not sure what you have in your CSS, but one thing you should make sure to do is define all of your font sizes proceeding your master body reset in em's. If this doesn't work try the letter-spacing CSS property and test in both browsers.
Hopefully these will work!
As a last resort you can try running the orignal font through fontsquirrel again and try different settings since FF and Chrome are potentially using two different font types.
Good luck!
That looks likea downloadable font, yes? Are you using it to style bold text but not telling the browser it's a bold font, causing the browser to apply synthetic bolding? With a font like that synthetic bolding will NOT work well, obviously.
Can't seem to get my font working in firefox, seems to work fine in IE, chrome and Safari
<style type="text/css">
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.TTF") /* TTF file for CSS3 browsers */
}
</style>
This is the website here, http://www.brightonorient.com - the front page text Brighton Orient should be Monotype corsiva.
Thanks for any help
I typically use Font Squirrel for my #font-face needs and have never had an issue. Check this link to see if the trouble shooting tips provide any help. If it is any consolation, in Firefox on my machine I can see the font load just fine and render properly. Throwing FireBug on it shows the font loaded properly as well. Not sure why you're not seeing it work unless your Firefox is not up-to-date.
Technically, it works for me on WinXP SP3 with Fx 6.0.2 but not with Fx 11.0
Though, on the legal side (IANAL), it seems you don't have the rights to use Monotype Corsiva with #font-face: only Monotype does. See http://www.fonts.com/findfonts/detail.htm?productid=172339 and their service http://webfonts.fonts.com for maybe a solution.
Using it on your computer and distributing it to every visitor via your server are often two very different licences!
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
go to this link http://www.fontsquirrel.com/fontface/generator
upload your font
then download all files have different font formats which is supported for different browsers
and use in your project. now it will work accurately in all browsers
How to use a stylish font on my website that works on all browsers
"that works on all browsers"
I don't think there is such a thing as ANYTHING "that works on all browsers".
But your options would include (as stated above) sIFR, though you'd only want to use that for headlines, at most.
More recent browsers can support #font-face css "embedding" of fonts. Some online web services that will allow you to license type for that (either commercial or free fonts) and also make the CSS/JS needed include:
http://www.kernest.com
http://www.typekit.com
and there are others as well.
There's also Cufon, which is a javascript based solution.
Try sIFR. "Rich Accessible Typography for the Masses".
Edit: Also, check out cufon. (via later posts)
The only worthwile solution is sIFR.
You really should check out the #font-face CSS3 rule. Here's a converter to make it work in IE. Paul Irish has a great writeup on how to use the rule here.
[EDIT] Just found a handy generator, too: http://www.fontsquirrel.com/fontface/generator
Font embedding is becoming viable now. Check out this post from Jonathon Snook
Do you want to use if for headlines and other 'special' text or for general paragraphs of text? If the former, sIFR or an image representing the text would probably be best. If you want whole paragraphs then you should look into #font-face like DA suggested or see if there's an acceptable web safe font that is close enough to the font you would prefer to use.
I personally have switched from sIFR to cufon on projects that don't have issues with font EULAs. The about page has a more in depth overview.
Depends what font you want to use ... the easiest solution is to use the #font-face method. If you include the microsoft only format(.EOT) it will work in ANY browser.
Font Squirrel has a great collection of free to use commercially, font kits, that include:
Original TrueType or OpenType Fonts
for Firefox 3.5 and Safari
EOT fonts for Internet Explorer
SVG fonts for Opera, iPhone & Chrome
WOFF fonts for Firefox 3.6+
Demo.html and stylesheet.css so you
can get going fast
The #font-face method doesn't require Javascript or Flash, like the previously mentioned sIFR and Cufon techniques, so is more accessible by all.
It's totally SEO friendly and scalable.
I'm helping my sister convert a website that somebody did for her in flash into html.
They use fancy fonts in the flash that I am trying to define in a css file through #font-face. I tried opening the page in firefox, IE and chrome, but nowhere do I see the proper font.
The declaration that I am using is:
#font-face {
font-family: "VAG Rounded";
src: url("http://judith.huinink.net/chilax/VAGROUNL.OTF");
}
http://judith.huinink.net/chilax/index.htm contains the html.
http://judith.huinink.net/chilax/chilax.css contains the full css.
I checked that I can download the font file, but it simply doesn't use the font when I open the page in a browser. I must be overlooking something. Does anybody have any suggestions?
font-face goes mainstream
As of January 2010 all major new browsers support font-face
Safari 3.1
IE - all versions
Firefox 3.6
Chrome 4
Opera 10
See http://webfonts.info/wiki/index.php?title=#font-face_browser_support
Update
In the last year, browser support for fonts has improved rather dramatically. I'd suggest reading Tim Brown's excellent article on the subject, which describes in detail how to get web fonts working in most modern browsers.
Original answer
In realistic terms, #font-face is completely unusable right now. Only two browsers support it — Internet Explorer for Windows, version 5 or better, and Safari 3.1.
Worse, IE and Safari do not support the same font formats. IE supports only EOT, while Safari instead supports the more common TrueType (.ttf) and OpenType (.otf) formats.
Almost no browsers support #font-face: When can I use...
http://www.css3.info/preview/web-fonts-with-font-face/
How to use #font-face in all browsers that support it: at Jon Tangerine's blog
ttf2eot is a nice font converter for Unix and Windows so you don't have to use the horrible old Microsoft WEFT. It converts the whole font, not just some characters.
Here's a javascript to use with sIFR that disables sIFR for #font-face enabled browsers.
Flash needs to die, so here's another alternative to sIFR: facelift. It's a serverside script that generates images.
The problem with afaik all sIFR replacements is that selecting and copying text doesn't really work -- you either don't see the selection, or it's impossible to select less than a word or line. There's also Cufón which uses <canvas>, so it only works on newer browsers, most of which have #font-face anyway.
Do the right thing, use the state-of-the-art technology now: #font-face with TTF or OTF, and fallbacks for IE and old browsers. Preferably keep your HTML clean and implement those fallbacks in separate javascript and CSS files. For IE you might need to use "conditional comments" as explained in my first link above. For browsers with javascript disabled, always specify a list of replacement fonts with the web-safe fonts at the end.
Check out the ever popular sIFR or with no flash dependency, typeface.js
I've come across situations where WWW must be included in the domain. Without it, it wouldnt work.