[wp-trac] [WordPress Trac] #63568: WP_Font_Face: Font names that contain single quotes are not wrapped in double quotes

[WordPress Trac]

#63568: WP_Font_Face: Font names that contain single quotes are not wrapped in
double quotes
--------------------------+-----------------------------
 Reporter:  wildworks     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 Originally reported in
 [https://github.com/WordPress/gutenberg/issues/70426 GB 70426].

 [https://github.com/WordPress/WordPress/blob/3e80de528875b9ba401e0c6c030a8fcfa46184d5
 /wp-includes/fonts/class-wp-font-face.php#L358 The
 WP_Font_Face::build_font_face_css method] checks the font name and wraps
 it in double quotes if it contains spaces. However, if the font name
 contains a single quote, it will be erroneously detected as already
 "wrapped" and the wrapping process will not be performed.

 As a result, the correct CSS will not be generated, and the font will not
 be applied:

 {{{
 <style class='wp-fonts-local'>
 @font-face{
   font-family:O'Reilly Sans;
 }
 </style>
 }}}

 This code should be:

 {{{
 <style class='wp-fonts-local'>
 @font-face{
   font-family:"O'Reilly Sans";
 }
 </style>
 }}}


 On the other hand, CSS variable values ​​are correctly wrapped in double
 quotes. This is because it is properly handled by the
 [https://github.com/WordPress/WordPress/blob/3e80de528875b9ba401e0c6c030a8fcfa46184d5
 /wp-includes/fonts/class-wp-font-utils.php#L32
 WP_Font_Utils::maybe_add_quotes method]:

 {{{
 <style id='global-styles-inline-css'>
 :root{
   --wp--preset--font-family--oreilly-sans: "O'Reilly Sans"
 }
 </style>
 }}}

 The solution should probably be one of the following:

 - Make the logic of the `build_font_face_css` method the same as the
 `maybe_add_quotes` method.
 - Deprecate the `build_font_face_css` method and use the
 `maybe_add_quotes` method instead.

 == Testing Instructions

 1. Open the site editor.
 2. Click on the Styles button in the top right.
 3. Typography > Fonts section > click the Manage fonts button
 4. Click the Upload tab
 5. Upload the `O-Reilly-Sans-Regular.ttf` font file attached to this
 ticket. This font is Savate font, an open-licensed font published on
 Google Fonts, and I changed the font name to "O'Reilly Sans" using
 FontForge.
 6. Close the font modal.
 7. Elements section > Text > Typography section
 8. Select the "O'Reilly Sans" font from the Font dropdown.
 9. The font will be applied throughout the site editor, most likely
 because the font is being loaded in JS and not via PHP.
 10. Click the save button and reload your browser. The font should no
 longer be applied.
 11. The font should no longer be applied on the front end.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63568>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform