Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fonts: Add Noto Serif JP, faux cjk subset #630

Merged
merged 3 commits into from
Jun 24, 2024
Merged

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Jun 18, 2024

This PR adds the Noto Serif JP font from noto-cjk, using "Region Specific Subset OTFs Japanese (日本語)".

I've decided to use this version, instead of the subset version suggested in WordPress/wporg-main-2022#427, because this is a variable font. This means we have access to all weights (just like EB Garamond) without having to load multiple font files. This version has also been updated since the subset versions were made.

The font file has been added to the global-fonts CSS, so that w.org sites can use this with font-family: "Noto Serif JP";. The font can also be marked for preloading with global_fonts_preload( 'Noto Serif JP', 'cjk' );.

Followup PRs to the parent theme and main theme are in progress to actually use the font.

Fixes WordPress/wporg-main-2022#427

@t-hamano
Copy link

Thank you for addressing this issue!

I tested this PR by doing the following:

  • Checkout this branch locally and built it
  • Added the following code to my theme:
    function enqueue_cjk_fonts() {
    	global_fonts_preload( 'Noto Serif JP', 'cjk' );
    	wp_enqueue_style( 'wporg-global-fonts' );
    }
    add_action( 'init', 'enqueue_cjk_fonts' );

The font is preloaded, but the font family is not applied.

image

I investigated the reason and found that it might be because the folder contains a space.

This is because the space is encoded in the font URL:

<link rel='preload' href='http://localhost:8888/wp-content/mu-plugins/global-fonts/Noto%20Serif/NotoSerifJP-cjk.woff2' as='font' crossorigin='crossorigin' type='font/woff2' />

But in the stylesheet, the space remains a space.

As a test, I changed the directory name from Noto Serif to NotoSerif and removed the spaces from the relevant code, and the font family was applied correctly.

image

font-weight: 200 900;
font-style: normal;
font-display: swap;
src: url(./Noto Serif/NotoSerifJP-cjk.woff2) format("woff2");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's the same as @t-hamano's comment. I have to set this to

./Noto\ Serif/NotoSerifJP-cjk.woff2

to make it work. Otherwise, the font isn't applied.

@ryelle
Copy link
Contributor Author

ryelle commented Jun 24, 2024

Aha, I had Noto Serif JP installed locally, so I missed the issue. I've renamed the folder to NotoSerif to match the other folders, which lack spaces, and it's working correctly now.

@ryelle ryelle merged commit dea7cc0 into trunk Jun 24, 2024
2 checks passed
@ryelle ryelle deleted the add/noto-serif-jp-font branch June 24, 2024 19:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

How to Implement Web fonts for a specific language for a specific locale
3 participants