Working with web (#font-face) fonts - css

Question

I have a basic question that probably refers more to design field, but still it is a web programming.
Let say I need to use Palatino-Linotype font in my web application. How do I better embed it in to my web page application?
My known way:
1) Go to font.com and buy all kinds of palatino-linotype: normal, bold, italic, italic-bold. 4 different files.
2) Then I load fonts via fontface style
#font-face {
font-family: "Palatino-Linotype-normal";
src: "..."
}
#font-face {
font-family: "Palatino-Linotype-italic";
src: "..."
}
3) A I have 4 different fonts, in HTML markup I need explicitly set font of the element to make it bold, or italic, or italic-bold (that what I don't like the most).
Question:
1) is that workflow of using custom web fonts?
2) Maybe there is a way to treat this fonts as usual fonts in term of setting only one font on parent element, and for inner set only style="font-style: italic;" if I want them to be italic.
3) question about performance, does web font rendering speed differs from rendering of usual fonts?

Answer 1

The logical way, generally supported by browsers, is to declare each typeface in a separate rule, as in
#font-face {
font-family: foobar;
src: url("foobar-regular.woff");
}
#font-face {
font-family: foobar;
font-style: italic;
src: url("foobar-italic.woff");
}
and then just declare font-family: foobar and use font-style: italic directly or indirectely via <i>, <em>, and other markup that causes default rendering in italic.
I have simplified the code in an obvious way; naturally you should normally make the font available in different formats, as recognized by browsers.
Services like FontSquirrel generate different code, but it is fairly straightforward to fix the code they produce, or write the code from scratch.
I have intentionally used “foobar” and not “Palatino Linotype”, since the latter is not legally available for use as a downloadable font; at least this is what presume until proven otherwise. (There are many sites on the web that distribute or sell fonts illegally.)

Answer 2

Check out Fontsquirrel http://www.fontsquirrel.com/ it helped me to generate fonts and css:s compatible for multiple browsers.

Answer 3

If you only use Palatino Linotype Normal, and then change it to bold in CSS you won't get the same results as Palatino Linotype Bold. The thing here is that the browser rendering will be used to achieve that and it will suck a lot. I mean, for me and probably for you it will look the same - but not for designers :)
Also there are a lot more to one font than normal, bold and italic. There are light, semi light, black and so on. And designers tend to use those a lot.
So in general, for the first and second question: use different font faces for different styles and no way to use different faces for different styles, another font family indication is needed.
As for the 3rd one: performance is an issue with embedded fonts. But mostly not because of rendering, but because the font files are heavy to download. So be sure to cache them and use only those needed. For example http://www.fontsquirrel.com/ in the previous answer actually by default adds too many files that are all downloaded, so make a little research to know about different formats and what you need to embed.

Answer 4

You use Palatino-Linotype font in your web application use web font from google.
https://developers.google.com/webfonts/docs/webfont_loader
The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Web Fonts API provides. The Web Font Loader also lets you use multiple web-font providers. It was co-developed by Google and Type kit.
More inforamtion follow this link to my blog:
http://webtemplatesmonster.blogspot.in/2013/02/how-to-use-font-face.html
#font-face { font-family: 'Awesome Font'; src:
url('awesome-font.eot'); /* IE9 Compat Modes */ src:
url('awesome-font.eot?#iefix') format('embedded-opentype'), /*
IE6-IE8 */
url('awesome-font.woff') format('woff'), /* Modern Browsers */
url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */ }