Custom font with TextField's outlined variant - when 'in focus' the outline does not resize properly

[gebigoma]

When using a custom font with TextFields Outlined variant the outline doesn't resize properly - it cuts into the label.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The outline should resize so that it is completely outside of the label.

Current Behavior 😯

When using a custom font with TextFields Outlined variant the outline doesn't resize properly - it cuts into the label.

Steps to Reproduce 🕹

I've created a sandbox for this, with the custom font uploaded, but for the life of me can't figure out how to make custom font work inside the sandbox BUT here are some screen recordings of my local codebase showing what happens before and after I comment out the font in themes:

with custom font:

comment out font:

without custom font:

Sandbox Link:

1. https://codesandbox.io/s/material-demo-w44d7
   (failed to make custom font work with code but all the info and files are there.. if this helps in any way)

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.2.1
React	v16. I 8.3
Browser	Chrome v75.0.3770.100
TypeScript	v3.5.3
etc.

[oliviertassinari]

@gebigoma Thanks for the reproduction, I believe it's a duplicate of #16465.

[gebigoma]

Used fontFaceObserver package and worked like a charm!