Google Fonts で一部の文字のみを利用する

tl;dr

<link
  href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap&text=Hello%2C+world%21"
  rel="stylesheet"
/>

もしくは

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap&text=Hello%2C+world%21");

のように、 text=asdf として必要な文字をURLエンコードして渡せばいい

経緯

英字のみを別の日本語フォントに変えたかったが、その日本語フォントには英字のみのセットがなかった

CSSには「英字のみこのフォント」みたいな指定はない（はず）ので、英字のみのフォントを font-family の優先順位の高位に置き、次に日本語フォントを指定することにした

調査

公式ドキュメント
https://developers.google.com/fonts/docs/getting_started

リポジトリ
https://github.com/typekit/webfontloader

ドキュメントレベルでは、文字コードの範囲指定で渡す方法はなさそうだった
時間がなかったのでリポジトリは見てない

対応

全ての英字は全てのASCII文字を検索した

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ 

URLエンコードしたものが以下

%21%22%23%24%25%26%27%28%29%2A%2B%2C-.%2F0123456789%3A%3B%3C%3D%3E%3F%40ABCDEFGHIJKLMNOPQRSTUVWXYZ%5B%5C%5D%5E_%60abcdefghijklmnopqrstuvwxyz%7B%7C%7D%7E

これを text= に指定

<link
  href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap&text=%21%22%23%24%25%26%27%28%29%2A%2B%2C-.%2F0123456789%3A%3B%3C%3D%3E%3F%40ABCDEFGHIJKLMNOPQRSTUVWXYZ%5B%5C%5D%5E_%60abcdefghijklmnopqrstuvwxyz%7B%7C%7D%7E"
  rel="stylesheet"
/>

上記指定のうえ、

body {
  font-family: "M PLUS 1p", "Hiragino Sans", sans-serif;
}

とすると、英字のみが正しく別のフォントに置換された