What is the best way to include custom font using CSS to make it compatible with maximum browsers?
Here is the css i use to embed my font in every browser, hope that helps:
@font-face {
font-family: 'xyzfont';
src: url('fonts/abc-font.eot'); /* IE9 Compat Modes */
src: url('fonts/abc-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/abc-font.woff') format('woff'), /* Modern Browsers */
url('fonts/abc-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/abc-font.svg#svgFontName') format('svg') /* Legacy iOS */
}
Also note, that you can set your font family without quote, like this:
h1, h2, h3, div span { font-family: xyzfont, Georgia, Arial; }
You can learn about font browser support here.
fontsquirrel is probably the best place to generate every font format you need.
This article explain how to find your font ID to add after the hashtag for the SVG font.
If someone is asking why is there ?#iefix
for IE6-IE8 browsers eot font, see this answer.