Participant

Question

Web Project fonts are misaligned

Forum|Forum|2 years ago
April 5, 2023
2 replies
1496 views

I'm curious if anybody has found a workaround or experienced this issue, but there are many fonts in Adobe fonts that are practically unusable due to their baseline being so off.

Example 1: 'New Frank'

In this example, the text rises above the center point of the anchor tag.

Example 2: 'Bio Sans'

In this example, the text falls below the center point of the anchor tag.

Example 3: 'Rubik', from Google Fonts

Amazing! It works as intended!

My issue is that our design team uses Adobe Fonts for print media, and I have so much trouble with these Adobe Fonts. It might be acceptable for paragraphs or headings, but look at situations like this:

This element is using CSS Flex, with everything aligned center. The issue - using an Adobe Font. It works perfect with Google and System fonts, so what is the fix here? Is this just an issue with the creation of the fonts themselves?

Font rendering

T

TeamWILD

Participant

Hi Noah,

I also have this issue. I have reached out the Adobe Fonts Support but the chat was ended and i didnt get a solution.

I contacted the typeface creator and they told me it is an issue caused when Adobe creates the web font.

I am using the Contralto font family.

K

k4c70iD

Participant

I noticed the same with font Redonda. When using it locally it's works fine but embeded web project version have moved its baseline. Annoying.

Tarun Saini

Community Manager

Hi

@k4c70iD

,

Thanks for your patience. Please elaborate more on the issue of what happens when you embed the fonts on web projects.

If possible, please share the screen recording of the issue.

Regards,

Tarun

Neelamk

Legend

Hi Noah,

Welcome to our Community forum. We are sorry for your difficulties related to Adobe Fonts Customization in Web Projects. To help you with your query, we have an article link to answer your questions.:

https://helpx.adobe.com/fonts/using/add-fonts-website.html

You will find options to Customize the fonts in your Web Projects. please let me know if this helps you in any way. We are here to help you.

We hope to hear from you soon.

Regards,

Neelam

N

Noah AnuttaAuthor

Participant

Thank you, but this not what I'm looking for.

Options within the Web Project editor only allow for selection of weights, the alteration of font-display (a classification of loading behavior), and the selection of OpenType features.

I'm looking for help in adjusting the baseline height of fonts. As you can see in my pictures, there can be a pretty big difference in where text is positioned in the button purely based off the font chosen. Is seems that this is a known bug, at least by the community. Is Adobe able to make updates to these fonts or do we need to ask the original creator? If we need to ask the original creator, perhaps Adobe should include web-standards as part of making the fonts available to use in a web project.

Neelamk

Legend

Hi Noah,

Thank you for the information. I am afraid there is no way to change the baseline of the fonts rather you could convert the text to outlines and make static modifications but the baseline is part of the design of the typeface. You could reach out to the creator and request the modifications you are looking for. They might help you with your request.

Please let me know if the information provided is helpful.

Regards,

Neelam

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded