[MDCTextField] floating label gets cropped with custom font

[sgreifeneder]

Bug report

I've included MDC Web in a AspNetCore MVC project. So far it's working fine, but I experience the following issue: the floating label for text fields (outlined variant) gets cropped when it moves up to the notched outline (see screenshots). It seems that using a custom font causes this issue.

Steps to reproduce

1. add custom font (ttf) to project
2. override scss font variables ($font-family, $styles-*) from @material/typography with custom font
3. include a text field on the page
4. click into text field -> floating label will be cropped

Actual behavior

Floating label gets cropped.

Expected behavior

Width for the floating label should be calculated correctly.

Screenshots

Your Environment:

Software	Version(s)
MDC Web	14.0.0
Browser	All
Operating System	Win 11

Additional context

Possible solution