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.
Is the problem the font itself or is it possible to fix that somehow with css?
line-height is set to 1
8
If you want to center ‘h1’ and ‘p’ elements horizontally, you need to assign ‘text-align: center’ to the parent div in CSS.
Noman Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Add text-align: center; CSS property on the tag.
As I saw your webpage has only <h1> and <p> tags.
So you can add new style like this
h1, p {
text-align: center;
}
2