Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


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

Community Beginner ,
Jan 21, 2021 Jan 21, 2021

Copy link to clipboard

Copied

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?

Views

282

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Jan 29, 2021 Jan 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 postin...

Likes

Translate

Translate
Community Beginner ,
Jan 22, 2021 Jan 22, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 24, 2021 Jan 24, 2021

Copy link to clipboard

Copied

I would say the difference is nearly imperceptible. 

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

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 26, 2021 Jan 26, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 27, 2021 Jan 27, 2021

Copy link to clipboard

Copied

I replied here yesterday while accidentally making an orphan account. Just to confirm – yes, this response indeed comes from an Adobe employee.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 27, 2021 Jan 27, 2021

Copy link to clipboard

Copied

Those screenshots were taken from Chrome running locally.  Veeva runs in an iPad app using a webview, which I believe uses the same webkit rendering engine.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 29, 2021 Jan 29, 2021

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines