D
D
dom1n1k2012-12-22 16:24:02
css
dom1n1k, 2012-12-22 16:24:02

Problems with woff-fonts on the example of PT Sans Narrow?

I made up and continue to maintain one rather high-load site. There, the well-known font PT Sans Narrow is used for headings.
At first, I simply downloaded the font files from FontSquirrel and put them directly on the server. But it soon became clear that the Squirl version had serious glitches.
Firstly, for some reason the letter "ё" does not work.
Secondly, some letters in certain sizes seem to jump out of the line, being slightly higher than their neighbors. At least on Windows. For example, "e" in 16px and 22px:
pt-sans-bug.png
So I turned to Google Web Fonts. Additionally, I was attracted by reducing the load on my server.
But the customer began to complain about the slow loading of the font, due to which Firefox users watched a blank screen for half a minute. After a number of attempts to build various crutches, I came to a special JS-loader . With him, the problem was significantly smoothed out, but alas, it did not disappear completely. This is the solution currently running on the site.
Not so long ago, I came across the idea to stick a base64 encoded font directly into CSS. It would seem simple and ingenious.
But it turned out that the woff file with Google Fonts weighs some inadequate 247 kilobytes. You can verify this by pulling the link from the css file. If I'm not mistaken, base64 simply cannot accommodate such a volume cross-browser. The same font downloaded from FontSquirrel pulls in 23 kilobytes, that is, more than 10 times less! But, as mentioned above, it is buggy.
I am still silent about the baseline jumping in different woff-converters (it interferes with the exact vertical positioning of text, for example, on buttons) ... All this is very annoying.
Eternal questions: who is to blame and what to do?
Where to find / how to make a small and bug-free font?

Answer the question

In order to leave comments, you need to log in

3 answer(s)
S
Softlink, 2012-12-22
@Softlink

Try to get the font from here . And yo is and hinting does not seem to jump in size.
You can check it right there : sans-serif > PTSansNarrowRegular + play around with the font size below.

U
UncleByte, 2012-12-23
@UncleByte

So here they are in all formats on the manufacturer's website - www.paratype.ru/public/

N
Nazar Mokrinsky, 2012-12-22
@nazarpc

Have you tried to compress the css with the font to base64 using gzip?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question