0

I'm having this weird situation when trying to create a text logo for my site, http://geekket.co/.

In desktop browsers (Firefox 51, Chrome 56, IE 11.576, Edge 38) the logo works perfectly, it looks pixel perfect as our design document specifies it.

But in mobile, the line-height property seems to work wrongly. Opera renders it fine, but Firefox and Chrome don't work as expected.

Mobile screenshots imgur album because I still have not enough reputation: https://i.stack.imgur.com/dbqcq.jpg

This is the CSS code dedicated to that particular section of the logo:

#LogoGeek {
  display: inline-block;
  background-color: rgb(90, 186, 71);
  font-family: "ForcedSquare";
  font-size: 90px;
  line-height: .72;
  height: .74em;
  padding: 0 .05em 0 .12em;
  vertical-align: middle;
}

"ForcedSquare" is a web font we added to the site.

I fiddled with the Remote Dev Tools ability in Mobile Chrome and found that if I changed line-height to .87, it works as expected, however, I feel that it is a ridiculous fix.

As far as I have read, it seems to be some sort of issue with the particular font. But then why there's no deal with all the different browsers of desktop and/or Opera Mobile, I have to idea.

Is there a better way to adjust it, or make it work properly in all browsers? Thank you every one!

Atef Hares
  • 4,715
  • 3
  • 29
  • 61
Tamh
  • 1
  • 2
  • Not sure based on the question if you are using a button element here - but I had a similar problem and found the answer at this post: https://stackoverflow.com/questions/3430506/iphone-button-padding-unchangeable – CDK Aug 16 '18 at 11:28

1 Answers1

0

I know 2 solutions for this situation . First is that you can use paddings instead of line-height . Second is that you are using only one format of font . You must use all formats like TTF , OTF , WOFF . You can read more on w3school page . Link for W3schools.com

Giorgi Parunov
  • 71
  • 2
  • Thanks for your insight. I tried using all font file formats but it didn't work either, the live page now uses all those formats in the CSS file. Also, tried removing line-height and it completely messes up the consistency, since it makes the upper border bigger. Also, I'm using padding to maintain the background consistency. – Tamh Feb 26 '17 at 18:44
  • @tamh And What if you use SVG instead of Font ? – Giorgi Parunov Mar 01 '17 at 11:45