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>:

^{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:

foreach ($this->choices as $value => $label) {
    echo '<option […] style="font-family:' . $value . '">' . $label . '</option>';
}

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.

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/source-sans-pro-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('../../fonts/source-sans-pro-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/source-sans-pro-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/source-sans-pro-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/source-sans-pro-v13-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

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?