OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to center font vertically in it's line-height

  • Thread starter Thread starter Stefan
  • Start date Start date
S

Stefan

Guest
Im trying to implement a special font called 'Hagrid' which was bought by the client here: https://www.fontspring.com/fonts/zetafonts/hagrid

Demo-page: https://fonttest.web-fuchs.net/

When using the font on the website it is not vertically aligned to the line. On the site: fonttest.web-fuchs.net you can see the first H1 is in Hagrid font. There you can see that the Text is not centered to its own line-height. At the 'sans H1' for example, you can see what I would expected normally of a font: that it's letters are centered to its own line-height. The italic version however seems to work better, but maybe a bit too low.

The negative effect is when using the font, e.g. in a button where a top and bottom border is set. This makes the font appear not centered inside the button.

Is the problem the font itself or is it possible to fix that somehow with css?

Update: I just figured out, that the font works fine on Mac, but not on Windows.

line-height is set to 1

enter image description here
<p>Im trying to implement a special font called 'Hagrid' which was bought by the client here: <a href="https://www.fontspring.com/fonts/zetafonts/hagrid" rel="nofollow noreferrer">https://www.fontspring.com/fonts/zetafonts/hagrid</a></p>
<p>Demo-page: <a href="https://fonttest.web-fuchs.net/" rel="nofollow noreferrer">https://fonttest.web-fuchs.net/</a></p>
<p>When using the font on the website it is not vertically aligned to the line. On the site: fonttest.web-fuchs.net you can see the first H1 is in Hagrid font. There you can see that the Text is not centered to its own line-height. At the 'sans H1' for example, you can see what I would expected normally of a font: that it's letters are centered to its own line-height. The italic version however seems to work better, but maybe a bit too low.</p>
<p>The negative effect is when using the font, e.g. in a button where a top and bottom border is set. This makes the font appear not centered inside the button.</p>
<p>Is the problem the font itself or is it possible to fix that somehow with css?</p>
<p>Update: I just figured out, that the font works fine on Mac, but not on Windows.</p>
<p>line-height is set to 1</p>
<p><a href="https://i.sstatic.net/Z4b9tRZm.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Z4b9tRZm.png" alt="enter image description here" /></a></p>
Continue reading...
 

Latest posts

Top