Google FontsのURLパラメーターメモ
- 複数のフォント読み込みについて追記
- 記事投稿
- 記事投稿
Google FontsのURLパラメーター部分についてのメモです。
普通に使用する分には気にしなくて問題ありませんが、憶えておくと便利なこともあるので自分用に。
デモは総じて総称ファミリをsans-serifに指定しています。「明朝体フォントの代替にゴシック体はありえない」と思うでしょうが変化の視認性向上の為なので許してください。
基本
URLパラメーターとは
http://xxx?aaa=AAA&bbb=BBB&ccc=CCC(例)
URL末尾付近につくことのある、?以降の文字列です。
名称=値の形で示され、複数必要な場合は&を挟みます。
サーバーへ情報を送る為に使用され、Google Fontsサービスの場合、この部分で読み込みたいフォントやそれについての設定を付けることができます。
各パラメーター名と値について
family
読み込みたいフォントを指定します。
フォント名に半角スペースがある場合
半角スペースを+と置き換えて記述
例
Noto Serifを読み込む
https://fonts.googleapis.com/css2?family=Noto+Serif
複数のフォントを読み込む
|を挟んで必要数分フォント名を記述
又は&を挟んでfamily=フォント名を必要数分記述
例
Noto SerifとRoboto Slabを読み込む
https://fonts.googleapis.com/css2?family=Noto+Serif|Roboto+Slab
読み込むフォントの太さを指定
フォント名直後に:wght@数値を記述
複数の太さを読み込む場合は;で挟む
例
https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200
https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;900
display
フォント読み込み前の文字の表示を指定します。
未指定時、読み込みフォントの使用箇所はフォントの読み込みが終了するまでテキスト表示されませんが、display=swapを指定しておくことで読み込みまで表示可能な代替フォントで表示されるようになります。
擬似プレビュー
-
未指定時
あ
読み込み -
指定時
あ
読み込み
設定
読み込みフォント：Noto Serif JP
CSS：font-family: 'Noto Serif JP',sans-serif;
実際に動作させているわけではなく、視認しやすよう再現したものです。
未指定時読み込み完了まで文字が表示されないのに対し、指定時はCSSにて'Noto Sans Serif'に続いて記述したsans-serifを代替フォントとして最初から表示させています。
text
読み込みたい文字を指定します。
例
Noto SerifのABCのみを読み込む
https://fonts.googleapis.com/css2?family=Noto+Serif&text=ABC
重複する文字は一度の記載でOK
titleの文字のみを読み込む場合、tは重複するのでtext=tile,text=titleどちらでも問題ありません。
半角アルファベット、数字以外の指定時
指定したい文字をURLエンコードした上で記述してください。
例
Noto Serif JPのあのみを読み込む
https://fonts.googleapis.com/css2?family=Noto+Serif+JP&text=%E3%81%82
軽量化に有効
ここで値にした文字以外は読み込まれない為、「日本語フォント等、ファイルサイズの大きいもので一部のみを使いたい」場合などの軽量化に非常に有効です。
ちなみにこのページも、日本語フォントのNoto Serif JPを読み込んでいますが、ひらがなの「あ」とフォント名に使われるアルファベットのみを指定している為そう重くはなっていないと思います。
三点リーダの垂直位置問題の解決
スマホ等によっては端末プリインストールフォントの関係でどうあがいても三点リーダ(…)がベースラインに対して下付きになります。
三点リーダを垂直位置中間表示にしている日本語フォントを採用することで解決するのですが、いくつかの問題があります。ごちゃごちゃと書くことになるので先んじて結論を述べると下記で全て解決してくれます。
解決方法
①他で使わない日本語フォントの読み込みにtext=%E2%80%A6を指定する
②CSSにてfont-familyの値で①で読み込んだフォントを優先させる
CSS
- @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&text=%E2%80%A6&display=swap');
- body {
- font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo','Osaka','ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
- }
問題１：単純に重い
日本語フォントは英数字に加え漢字や平仮名等多数の文字を含む為、読み込みの際非常に負荷がかかります。
他で使用するならまだしも、ただ三点リーダの中間表示の為だけに導入するのは理にかないません。
対して、解決策でのtext=%E2%80%A6を指定しておくと、読み込まれるのは一文字分の情報のみの為そう問題にはなりません。
問題２：英字フォントと併用できなくなる
CSSのfont-familyプロパティの性質上、複数の値を設定すると先行して記述した順に各文字に採用されるか否か判断します。
まず、指定フォントが閲覧端末で表示できるか(インストールされているか)否かですが、今回webフォント(サーバー側がフォントファイルを出力するためアクセスさえできれば環境よる差異が生まれにくい)の使用の話なので割愛します。
例として、「日本語は日本語フォントで、半角の英数字等を英字フォントで表示したい」とするとfont-family:'英字フォント名','日本語フォント名',総称ファミリ;の記述になります。 理由としては先に日本語フォントを指定すると、大抵の日本語フォントには半角英数字が含まれる為、代替の必要がなくなるからです。
しかし英字フォントを先行記述すると、大抵の英字フォントに三点リーダ(下付き)が含まれる為、これまた日本語フォントに代替してくれなくなり本懐は遂げられません。
対して、解決方法では先行して三点リーダのみ表示可能なフォント名を指定する為、「三点リーダは指定日本語フォント、半角英数字は英字フォント、日本語は日本語フォント」という表示が可能になります。
三点リーダを垂直位置中間表示にしている日本語フォント
この記事を書いている時点ではGoogle Fontsでは８種類の日本語フォントが提供されています。内６種は中間の表示になっているのでお好みで選ぶことをおすすめします。
おまけ
当サイトでの利用例
CSS
- @import url('https://fonts.googleapis.com/css?family=Roboto+Slab|Source+Code+Pro&display=swap');
- @import url('https://fonts.googleapis.com/css?family=Plaster');
- @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&text=%E2%80%A6&display=swap');
- body {
- font-family: 'Noto Sans JP', 'Roboto Slab', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
- }
- code {
- font-family: 'Source Code Pro', monospace;
- }
| ： | 汎用英字フォントとしてRoboto Slab、ソース表示用にSource Code Proの読み込み ページ全域に使うため読み込み前の文字非表示を避けたいので display=swapを指定 |
|
| ： | 装飾用英字フォントとしてPlasterの読み込み 読み込み完了後ポコッとフォント切替があるのが個人的にあまり好みではないので display=swapは未指定だいたい改装するときはここだけ変えています。 |
|
| ： | 三点リーダ垂直位置中央表示用の読み込み |