Fonts not working on safari

[merijnponzo]

Description

It looks like my fonts aren't quoted after i uploaded them trough the site editor's style panel

I see

<style class='wp-fonts-local'>
@font-face{font-family:Suisse BP Int'l;font-style:normal;font-weight:300;font-display:fallback;src:url('https://url/app/uploads/fonts/SuisseBPIntl-1.otf') format('opentype');}
@font-face{font-family:Stolzl;font-style:normal;font-weight:400;font-display:fallback;src:url('https://url/app/uploads/fonts/Stolzl.woff2') format('woff2');}
</style>

eg Suisse BP Int'l and Stolz should have quotes around them, i know the Suisse BP Int'l is a bit of a special usecase but still:

font-family: "Suisse BP Int'l", sans-serif;
font-family: "Stolzl", serif;

While quotes are not always required, they are a good practice to adopt for consistency and to avoid potential issues with special characters or spaces in font names.

I guess this would be a breaking change so that leaves me to use

function add_custom_fonts() {
    ?>
    <style type="text/css">
        @font-face {
            font-family: "Suisse BP Int'l";
            font-style: normal;
            font-weight: 300;
            font-display: fallback;
            src: url('url/app/uploads/fonts/SuisseBPIntl-1.otf') format('opentype');
        }
        @font-face {
            font-family: "Stolzl";
            font-style: normal;
            font-weight: 400;
            font-display: fallback;
            src: url('url/app/uploads/fonts/Stolzl.woff2') format('woff2');
        }
    </style>
    <?php
}
add_action('wp_head', 'add_custom_fonts');

Step-by-step reproduction instructions

1. I uploaded the Suisse BP Int'l (and the Stolz)
2. try it without quotes in your css editor, will throw an error in visual code studio so you have to quote them
3. Check safari

Screenshots, screen recording, code snippet

You can can see the fonts are not loaded in safari

But with quotes it works

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[t-hamano]

Thanks for the report.

I have determined that this issue is not browser-related and should be fixed in core. See https://core.trac.wordpress.org/ticket/63568 for more details.

@merijnponzo I'd like to close this issue, but could you share your .org username so we can include you in the props?

[sirreal]

#76782 addresses this issue with uploaded fonts.