S
S
Stepan Zubashev2012-08-05 20:30:30
Browsers
Stepan Zubashev, 2012-08-05 20:30:30

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

1 answer(s)
M
marcus, 2012-08-05
@marcus

Everywhere its smoothing. There is nothing to be done about it, the method of setting the font has nothing to do with it.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question