0

I've got a problem with using google fonts on website, The problems shows only if even font-size is used, Some of the letters are smaller or cut off on the top. There is no problem on google fonts website, though, if i try to use it on my server, i see it.

On the screenshot, you can see that letters П and Г are smaller, then other. Line-height doesn't help.

Here is my code:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,700&amp;subset=latin,cyrillic-ext,cyrillic" media="screen">

and:

<span style='font-family:"Open Sans", sans-serif; font-size:16px; font-weight:300; font-style:normal;'>ПРОГРАММА глАнаяГа</span>

I've uploaded simple sample code on the web: http://tochka.cz/fontstest/

No problems with linux|osx, but only on all windows browsers, font-size:16px is a problem, though font-size:17px isn't.

Thanks in advance, i really appreciate your help.

Mohsen Safari
  • 6,669
  • 5
  • 42
  • 58
Lisunov Ilia
  • 141
  • 1
  • 4

3 Answers3

2

This is a design flaw in the font used: it has not been designed to work with different font rendering techniques in all sizes. Such problems appear with some Google fonts in some sizes (the previous case I observed was the Sansation font in 17px size), and they may relate specifically to font rendering on Windows.

I don’t think there’s any quick solution. Google fonts should be tested in different environments (especially on Windows), and if some font face and font size combination turns out to be problematic, just avoid it—using 1px smaller or larger size should help. This emphasizes the need for testing with texts that cover a rich enough character repertoire (including capital letters).

Update: The Google Web Fonts site uses a different font file, and testing with the following (extracted from the CSS of the site), the problem does not appear:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'),
  url(http://themes.googleusercontent.com/licensed/font?kit=DXI1ORHCpsQm3Vp6mXoaTb7uYOTH0fqwR2fK3MMTyiuruusgsetRaCmkKU2Of3BmMh8Htnga2sTO__4Bgy4aRUbOfyIL9KspCxN8ekvQQBzoq8GLqcC6GrPYOPNC3QDT) format('woff');
}

I’m afraid such an approach is not robust.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thank you for your reply, I understand, that using another size will fix the problem, and I think, I'll have to do that, but one thing that stops me is that this font (and this text, ofcourse) looks totally fin e on Google WebFonts site (on the same browser, same PC). This is strange, the only thing I can imagine, that google uses different fontfile, which makes no sense. – Lisunov Ilia Sep 03 '12 at 11:27
  • Thank you very much, i also tried to download font (ttf, not woff though) and use it instead of using them directly from google website, and it fixes the problem as well. – Lisunov Ilia Sep 03 '12 at 12:04
2

The Google Web Fonts site uses a different font file in their system and the one you download, so if something goes wrong with downloaded font from GWF but is ok in Google Web Fonts site, you can download font directly from Google Web Fonts page (use Chrome Developer Tool or Firebug to get the link).

For example I used: 

http://themes.googleusercontent.com/licensed/font?kit=DXI1ORHCpsQm3Vp6mXoaTb7uYOTH0fqwR2fK3MMTyiuruusgsetRaCmkKU2Of3BmMh8Htnga2sTO__4Bgy4aRUbOfyIL9KspCxN8ekvQQBzoq8GLqcC6GrPYOPNC3QDT) format('woff')
Mohsen Safari
  • 6,669
  • 5
  • 42
  • 58
Lisunov Ilia
  • 141
  • 1
  • 4
0

The only difference I see between the image and what I see in Chrome in Windows 7 is the alignment.

And that's a OS issue that can be solved as proposed here, http://www.icavia.com/2010/09/solving-font-face-alignment-issues/

Henrik Ammer
  • 1,889
  • 13
  • 26
  • Thank you, the alignment is not a problem, the problem is that the first and the fourth character is smaller, than other ones, which is wrong :) – Lisunov Ilia Sep 03 '12 at 11:22