Skip to main content
D
devospice
Participant
January 21, 2021
Answered

Line height differs from online TypeKit font vs. local embedded CSS font

  • January 21, 2021
  • 4 replies
  • 1794 views

We are developing a Veeva presentation (think HTML-based iPad app) and our designers used a TypeKit font.  Unfortunately TypeKit requires the user be connected to the internet and we can't ensure that so we needed to embed the fonts directly in the CSS.  So we licensed the font in question (Avenir), got the package, and inserted it into the HTML.  What we found was that the line-height differs substantially between the two fonts causing all the elements to shift up.

 

This is literaly the only difference.  One links to TypeKit online.  The other uses local embedded fonts.  I have attached an animated GIF showing the difference  The local fonts appear much higher than the embedded fonts.  Unfortunately this is a HUGE presentation and adjusting the line-height of each element manually will take more time than we have to finish this project.

 

Has anyone run into this problem before?  Any idea what might be causing it or how to fix it?

    This topic has been closed for replies.
    Correct answer devospice

    OK, after reaching out to the type foundary where we got the fonts from they reached out to their contact at Adobe and told them what was happening.  Adobe's reply included this: "If the customer created their web project between January 6th and January 21, we had a known issue with our metrics having differed from what we usually served on the web."  They then supplied us with new fonts which I place in the app.  The new fonts match perfectly, so our problem has been resolved.  

     

    I'm just posting here in case anyone else ever runs into this.

    4 replies

    D
    devospiceAuthorCorrect answer
    Participant
    January 29, 2021

    OK, after reaching out to the type foundary where we got the fonts from they reached out to their contact at Adobe and told them what was happening.  Adobe's reply included this: "If the customer created their web project between January 6th and January 21, we had a known issue with our metrics having differed from what we usually served on the web."  They then supplied us with new fonts which I place in the app.  The new fonts match perfectly, so our problem has been resolved.  

     

    I'm just posting here in case anyone else ever runs into this.

    Frank Grießhammer
    Adobe Employee
    Frank Grießhammer
    Adobe Employee
    January 26, 2021

    This difference is not “imperceptible”, but very alarming.

    Could you please detail which browser you are using? There might be a change in how that browser handles vertical metrics, the effects of which were also reported for acumin.typekit.com

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 24, 2021

    I would say the difference is nearly imperceptible. 

    Have you tried disabling all CSS to see if that has any effect?

     

    Nancy O'Shea— Product User & Community Expert
    D
    devospiceAuthor
    Participant
    January 22, 2021

    Slight correction.  The font in question is Acumin Pro, not Avenir.  Avenir is also used in the app.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices