Font Rendering Certain Characters too High

C8G_Master

I have a custom OTF font build with the fontself plugin for photoshop with uses color.\ I set the font into a dynamic font inside a label with all the default settings.

The comma is rendering wrong as shown in the attached picture. In Photoshop the data looks like the comma is set to have the tail below the zero line to render correctly.

Anyone know how to properly export the font to get the character vertical render offsets?

TwistedTwigleg

This discussion was caught in the moderation queue since you have not confirmed your account yet.

Upon creating your account you should have received an account verification email. The confirmation email may have been incorrectly flagged as spam, so please also check your spam filter. Without confirming your account, future posts may also be caught in the moderation queue. You can resend a confirmation email when you log into your account if you cannot find the first verification email.

(Note: You do not need to repost, the discussion has been moved out and is visible now)

If you need any help, please let us know! You can find ways to contact forum staff on the Contact page. Thanks! :smile:

Megalomaniak

both the comma and the dollar sign $ should be lower. I suspect it's how you created the custom font in PS that is likely the source of the issue. That is to say I don't think it's export settings but rather that in your source file the signs aren't offset properly.

C8G_Master

That sounds reasonable.

The art in the file looks like it is ok with the comma being lower. There is a forum link that says that fontself uses the median of all the glyphs as the baseline, which is... not great for punctuation. https://community.fontself.com/t/fontself-disregarding-baseline-when-importing-punctuation-etc/1743

The illustrator plugin for fontself allows for a guide to be set per glyph, but illustrator doesn't allow for the effects we're looking for. https://help.fontself.com/en/articles/900365-set-font-metrics-with-illustrator-guides

It looks like fontself expects the program rendering the font to be able to do a per character render vOffset which Godot doesn't allow that I have seen.

Calinou

Godot 3.2.x doesn't support kerning in DynamicFont since it was broken there. Kerning will be restored in 4.0 as part of the Complex Text Layouts work.

C8G_Master

Ok, so that makes sense. Custom dynamic fonts that are textured like that aren't really viable until 4.0.

We just did a test to try an Illustrator font. In Ai it has a gradient. It came out flat white in Godot. It did fix the comma issue though...

Is there something I missed pulling in the font?

Megalomaniak

It might not be the solution you are searching for but the gradient could possibly be recreated in godot via a shader applied to the canvasitem.

C8G_Master

I will have to trust that is possible. My shader fu is really weak, even more so when tied to a font. My ultra naive attempt is comical.

We actually found a solution to the issue. I'll expound in a separate post

C8G_Master

So to fix the problem we abuse the way that the fontself decides how to place a glyph vertically. Since it picks a median point, the trick is to make the bottom of a character you want to be lower (like a comma) to have less non-alpha data on the bottom of the glyph than the median characters have.

Eagle eyed readers will notice the font is a bit different, we're porting the fix over to the original font now.

The numbers have a lot of glow around them. The glow forces the tool to detect the bottom, effectively raising the bottom of the character. The comma, without the extra glow can be visually lowered.

With a little finagling the overall effect works out pretty well.

If the glow isn't viable/desired for the font I suspect that adding a single pixel vertical bar at the bottom of the glyph would have a similar behavior, but that hasn't been tested.