0

I can't for the life of me figure out why the same font that I build using gulp-iconfont renders so wildly different on Windows vs. basically all other OSes, including mobile OSes. I've tested practically all of them through Browserstack, and consistently all browser running on Windows render the font with a massive amount of space above/below each icon while all other platforms render as expected.

I highlighted the elements using the inspector for the following screenshots:

Windows:

Here it is on windows

macOS:

Here it is on macOS

I think I have narrowed it down to be the font rendering, as when I change the font-family in the css, the spacing around the characters evaporates. I have messed around with the gulp-iconfont options (fontHeight is set to 1024 and font is being normalized) without success.

Is my only option to let go of compiling my own iconfont and just using svg's, or does anyone know what I might be doing wrong? I feel the stench of defeat upon me so any faint scent of hope would make me simmer with joy.

7oi
  • 61
  • 3
  • I would recommend uploading the images here. If they expire from imgur, then this question becomes very hard to use. See here: https://meta.stackexchange.com/questions/75491/how-to-upload-an-image-to-a-post – roelofs Oct 26 '17 at 00:52
  • Oh, I would, if it wasn't for my n00bness (first post and all) and the requirement of at least 10 in reputation to use images. As soon as I have built up my rep, this post will be edited. – 7oi Oct 26 '17 at 08:59
  • Ah, valid point - I forgot about the reputation limit. My bad. Carry on :) – roelofs Oct 26 '17 at 10:16

0 Answers0