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?