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
Source Sans Pro and Roboto are installed on the device and displayed correctly. Roboto Mono & Montserrat fall back to Times New Roman.
<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
How can I load & display fonts in the Customizer sidebar?