Working with web (@font-face) fonts

3
votes

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?

4
cssfontsfont-facewebfonts
My take on it is that there isn't a rendering difference, you must use fallback font's (3 is probably good enough) and that high quality glyphs are hard to find (try resizing a web font, they generally don't do well). My method is slightly different from yours, I take a font in whatever format I have it in (most websites have monthly freebies, I've got a collection) and use online converters to generate cross-browser formats. - A.M.K
There is a difference in performance when using @font-face because if the user does not have the font on their computer it will be downloaded from the server to be rendered to the client. - Jrod
Yes, but they asked about a rendering time difference... - A.M.K
@A.M.K What font converter can you advice? - WHITECOLOR
I use font2web.com combined with other converters to get ttf or otf files if I don't have, the glyphs are good quality but if you are going to be using them for small text you might want to consider other converters or original web fonts. - A.M.K

4 Answers

4
votes

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.)

3
votes

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

2
votes

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.

0
votes

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 */  }