Why does the font style attached to the page diverge from the PSD layout?

Question

css

The layout shows the pragmatica font in various styles. When you connect it to the page, the characters look different than in the layout, and this is very noticeable.
I connected both via link (allfont.ru service) and via @font-face, while saving the font in the site folder, but there are still differences in the styles.
For example, in the layout the letter "C" looks like this:

and as a result on the site it looks like this:

there are also differences in the letters "Z", "B", etc.
What could be the reason?

Answer 1

divs on flex. when adapting, you can both transfer under each other and swap blocks through order

Answer 2

Like iBird Rose said, divas with flex. Adapt them generally easy!

Answer 3

Photoshop has a font smoothing setting: sharp, smooth, saturated, Windows LCD. It is also possible to turn off anti-aliasing, which changes the font, sometimes beyond recognition. Actually, most fonts on the web are displayed without anti-aliasing, which is what you observe in your case.
You can simulate anti-aliasing in CSS through text-shadow, setting a shadow in the text color through rgba, but I don’t know exactly the normal default anti-aliasing tool at the program level. Therefore, the choice of another font may take place as a search for a solution, but about a pirated font, this is apparently some kind of anecdote.
By the way, such phenomena can be observed not only on fonts, but also on rounded edges, which can look much better on the web than in Photoshop. This is one of the reasons why SVG icons are preferable, because they programmatically adjust to the pixel density and give, mostly, the best result.

Answer 4

Download the font that you are connecting to your computer and install it for text in Flash. If the style becomes "incorrect", then the problem is in the allfont.ru font (incorrect, different version, pirated, etc.). Connect the font that was used in Flash.

Answer 5

This is completely normal behavior. Fonts in Flash and in the browser may differ even if the same font is used. It's all about rendering. You need to select a font so that it looks the same everywhere, or use already verified fonts from Google Fonts and everything will be ok.