@font-face in Customize Control

I’ve extended the WP_Customize_Control for displaying a <select> dropdown for fonts available in my theme (downloaded from Google Fonts and provided locally for privacy reasons). In order to make it easier to select a font, I want to show each font’s name using the corresponding font-face.

Unfortunately, while all fonts are working in the preview, only locally installed fonts are applied in the <select>:

Current customizer dropdown with only locally installed fonts being applied

Source Sans Pro and Roboto are installed on the device and displayed correctly. Roboto Mono & Montserrat fall back to Times New Roman.

The <option> tags are created with inline styles assigning the font-family:

The @font-faces are defined in my main css file & enqueued using the action customize_controls_enqueue_scripts. The fonts are working on the website & customizer preview and the stylesheet is loaded & applied in the customizer sidebar.

When I select a font that is not installed locally, the browser downloads the font and applies it in the page preview, but no fonts are displayed in the <select> dropdown.

How can I load & display fonts in the Customizer sidebar?