Say I have several .otf and .dfont font files that are used in PSD for web site design. Now I need to add those fonts into the HTML/CSS code. I know #font feature of CSS3 which does that. But I am sure that it would not work for older browsers? So what is the cross browser way of doing that?
Firstly, websites need not look alike in all the browsers (http://dowebsitesneedtolookexactlythesameineverybrowser.com/). It is perfectly fine to not display these fonts in the older browsers. Just provide a fallback as #ThiefMaster mentioned.
In case , you insist on using the same fonts even for older browsers, you might have to rely on Cufon (http://cufon.shoqolate.com) for cross browser compatibility. Use a feature detection (using Modernizr) and conditionally load the Cufon library. Be warned that using Cufon on body text would make the page load slower.
PS: All IE versions support web font embedding.
You can use http://www.fontsquirrel.com/fontface/generator to create a most-compatible CSS containing the various #font-face declarations.
Obviously there will be some old browsers not supporting it - for those you should specify a regular font when using the custom font, e.g. like this:
p { font-family: "your font", sans-serif; }
I'm using FontSquirrel's #font-face kit generator, and it works pretty well in my opinion.
Check it out at http://www.fontsquirrel.com/fontface/generator
Shai
FontSquirrel didn't work for me. http://transfonter.org/, on the other hand, was perfect in order to transform DFONT to TTF.
Related
I have some content on a web page that uses funny fonts to display correctly by using #font-face to use some custom fonts. I include a warning that it might not display correctly on all browsers. The content isn't really essential to the page, so what I'd really like to do instead is simply not show it if the browser isn't going to do it, due to browser version, script blocking, or whatever. Is there a way to do that?
Modernizr has this built-in. Here's a link to a build that just checks for #font-face support.
http://modernizr.com/download/#-fontface-shiv-cssclasses-teststyles-load
Then you can check in JS for Modernizr.fontface or in the css for .fontface { }.
Here's a fancy explanation of how to do it:
http://paulirish.com/2009/font-face-feature-detection/
To be clear you can pretty much support every browser with #font-face, except for some versions of Android.
http://caniuse.com/#search=font
Your bigger problem with #font-face isn't the basic support for #font-face, but support for the specific font file type, which is more limited. I personally suggest to use WOFF, which works in IE9+. Alternatively, if you use Typekit or Font-Squirrel you can pretty much support all browsers out of the box.
I know there's a lot of good questions on the site about these two script libraries.
I wanted to ask something that I can't seem to find in any of them though.
What does Modernizr provide that html5shiv doesn't out of the box, that is, just including the script.
I know html5shiv "just" fixes HTML5 elements for IE < 9, does it's support stop there?
Does Modernizr fix CSS3 issues on IE navigators? Does ie9.js do that? (and I mean this particular question out of the box, without additional js code to handle corner-cases)
What are the advantages of Modernizr over html5shiv when you take into account using the library besides just including the script?
They do different things.
Modernizr detects the availability of features in a page allowing you to provide your own polyfills for older browsers should you require that functionality. You can add support for <canvas> using a canvas tag polyfill so that canvas functionality, including it's JavaScript interface, in browsers that don't support the <canvas> tag.
Html5shiv adds the new html5 tags that aren't available (<section>, <header>, etc) to older browsers. It also creates the default styles (display: block for <section> for example).
That's it. It provides no other functionality.
Modernizr 1.5+ actually includes HTML5Shiv, so if you use it, shiv is redundant. Source: http://modernizr.com/docs/#html5inie
"As of Modernizr 1.5, this script is identical to what is used in the popular html5shim/html5shiv library."
When I tried some of the Asian sites (for example http://www.asahi.com/) it displayed the fonts correctly. I did not install those Asian fonts in my PC. Where the browser is getting the fonts from? Is it always dynamically downloads the font from web server ?
How to implement this support in my web server - Should I generate some java script or so?
The fonts are installed on the browsers.
Though, it is possible to define custom fonts thanks to the #font-face technology (entirely in CSS).
Search for #font-face, Cufon fonts etc.
Cufon basically is a font-replacement technique that uses javascript and vector graphics to write fonts from a font file.
I can't find any sign that they specify the font family at all. Certainly the bulk of text is rendered in Times for me, which is the default.
Your default font just includes characters you didn't know it contained.
There are ways to use custom fonts but they aren't using any of them.
When defining the font using css rules, you can add a src attribute specifying a url to fetch the font from a remote location.
Try this link for more info.
Also check out Google Web Fonts, which can provide you with a selection of fonts relatively easily, by adding an appropriate link tag to the header of your page.
Your PC almost certainly does include fonts with many Asian characters. When the web page includes characters that are not supported by the default font (such as Times or Verdana) you're using, browsers will automatically find an alternative font and use that instead, so that you still get readable text.
For Firefox, at least, there's a "fontinfo" add-on you can use to determine what font is actually being used to display any given piece of text - as it may not be the default font, or the font requested by CSS.
Web sites can use various techniques (including libraries like cufon or typeface.js, though CSS #font-face is usually a better option now that it's widely supported) to provide custom fonts for their pages, but this is not necessary in order for Asian text (for example) to be displayed on a typical PC.
I'd like to include an SVG image in an HTML5 web page, to interact with this SVG via JavaScript, and to apply CSS styling. If possible, I'd prefer to keep the SVG in a separate file. I'm hoping to be able to use the web page offline so hopefully whatever solution is recommended will be compatible with this.
Please could someone suggest the best / most cross-browser compatible way of doing this? If there's not really a method that will work across all browsers, I'd be happy to settle for a way that works with iOS 4.3's Safari browser :-)
Thanks in advance!
Thanks to everyone and apologies for not giving an update sooner - Unfortunately, I got distracted by another project!
After some time playing with various alternative options, ( http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html / http://www.schepers.cc/svg/blendups/embedding.html ) I've still not been able to use an external .svg file and keep the JS in the main HTML5 file - i.e. I've been unable to get these approaches to allow the SVG file to reference JS functions, or to allow the HTML file to gain access to elements from the included SVG file. Even inline SVG doesn't yet work on iOS :(
So, I'm going to try my luck with Raphael (http://raphaeljs.com). I think this may mean that I'll need to create the SVG programatically rather than being able to just link to an external .svg file. I'll just have to write a script to translate the SVG content to JS Raphael function calls and hope to avoid any other other stumbling blocks.
It depends the browsers you are targeting. Modern browsers (IE9, Chrome, Firefox4...) support inline SVG. Older browsers may require some alternatives.
Here there is an online test to check browser support by using several methods to include the SVG.
http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html
But I think that if you are using HTML5, then you are targeting modern browsers so you should use inline svg with the <svg> tag.
Take a look at this page: http://www.schepers.cc/svg/blendups/embedding.html
It shows five different ways of embedding an external SVG file into HTML (note that these aren't the only ways, but they are the simplest). It's also a quick way to check the capabilities of a particular browser.
What has changed browser wise, that people are using these funky font's w/o graphics by referencing .js files?
like typekit?
In modern browsers (firefox,chrome,safari) javascript create canvas element to create the font text
In Internet Explorer they use Computer Vision Markup Language
You can use the #font-face declaration to specify a custom font that the browser will render. Typekit uses js to make sure #font-face works across browsers.
You can read about implementing custom fonts here: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
like eyelidlessness mentioned, Font Squirrel is a great resource for this. Gives you tha markup and everything.