Font Family: consider using CustomSelectControl instead of SelectControl

[JuanLucha]

What problem does this address?

The Font Family in Typography is one of the dropdown fields the user can find in the sidebar. This field uses the SelectControl component to display the font families for the user to select one. This component is a wrapper of the <select> HTML element. Each browser shows the dropdown in its own way, as it is part of the <select> element managed by the browser.

Here is an example of when the field holds a lot of fonts (like Google Fonts, for example):

• Firefox:

• Chrome:

When scrolling over the options, firefox scrolls inside the dropdown without changing its top position, but in Chrome, that scrolling makes the dropdown grow to the height of the screen:

What is your proposed solution?

We should consider using CustomSelectControl instead of SelectControl. We are already using that for other fields, like the Font Size:

Using that component would maintain the same appearance and behavior among different browsers, including the vertical scroll behavior we could see in Chrome.

[Utsav-Ladani]

Hey @JuanLucha @jordesign, I replace the component to achieve the same UI across all different browsers in this PR. Please let me know if we can make any further enhancements.