Answer the question
In order to leave comments, you need to log in
How to customize @font-face?
Of all the available ways to embed custom fonts on a page, I like font-face the most. For the fact that it works everywhere, allows you to select and copy text, functions in “visiwigs”, etc. There's only one problem that's bothering me. The inscriptions look different everywhere, and, most often, terrible or just terrible.
Right now I'm building a site that uses LeagueGothicCyrillic. Initially, I have the ttf format, through font2web I get all the other formats. In test HTML, the style leaves much to be desired. Examples:
1. Chrome, winXP SP2 -
2. Chromium, Xubuntu12 -
3. Opera12, winXP SP2 -
4. Opera12, Xubuntu12 -
5. Chrome, win7 -
6. IE9, win7 -
7. PS5 -
I had the same problems with Helvetica, and, I suspect, with all the fonts that I have to embed. Nothing can be done within the font-face? Only Cufon and company remain?
=== Solution ===
Play around with font-face placement. I came up with the best option:
@mixin font_inline( $name, $filename )
{
@font-face {
font-family: $name;
src: url('../fonts/#{$filename}.eot?##{$name}') format('eof');
}
@font-face {
font-family: $name;
src: local('☺'),
inline-font-files('#{$filename}.ttf', truetype ),
url('../fonts/#{$filename}.woff?#reforma') format('woff'),
inline-font-files('#{$filename}.otf', opentype );
font-weight: normal;
font-style: normal;
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question