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:

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?

  • You would need to load all fonts all times regardless of which one is selected to be able to show them all in the dropdown – Tom J Nowell Oct 13 '20 at 10:43
  • @TomJNowell I might have phrased it in an unclear way: The selected font does not influence the customizer sidebar, only the website preview where everything loads correctly. If your advice still applies: how would I load all fonts at all times? Enqueue JS or some script in the customizer/control? – Cebbi Oct 13 '20 at 11:21
  • Even if you specify a tag for every font and tell the browser to use that font to render the option, the browser needs every single font loaded to display every single option in their fonts, and it needs loading in the customizer control to show it in the customizer control, not the preview iframe. Afterall if you don't have Roboto installed locally, how would the browser know how to render the Roboto option? The preview in the iframe knows because you told it to load that font from Google fonts – Tom J Nowell Oct 13 '20 at 13:43
  • I just found out that this is a Firefox issue. Chrome and IE fully support font-family in <option>-tags, while Firefox seems to only partially support it. Meh. – Cebbi Oct 13 '20 at 14:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.