WordPressサイトでGoogle Fonts APIから特定の文字列のみのフォントを取得する #PHP

背景

Google Fontsから2種類のフォントウェイトを読み込んでいるWordPressサイトの特定のぺージで、
新たに別の太さが必要になるケースがありました。
サブセット化したフォントをサーバに設置してもよかったのですが、
フォント適用箇所が記事の一部という動的なコンテンツだということ、
また対象文字列の量自体は少なく読み込み量を最小に抑えたいという点から今回の対応を行いました。

環境

WordPress 4.9.4
php 5.5.38

手順

文字列を絞り込んでフォントを取得するためのURLはこちらです。
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

上記を参考にサイトで実際に読み込みを行います。

フォント読み込み用URLを準備

今回は日本語フォントのNoto Sans JPを使います。
フォントのぺージから[SELECT THIS FONT]をクリックするとブラウザ下部にドロワーが表示されます。
そちらからフォント読み込み方法の確認や[CUSTOMIZE]タブからウェイトの指定ができます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300">

後からWP側で対象の文字列の絞り込みをしたいのでlink要素からフォント読み込みします。

対象文字列の絞り込み

文字列を取得する関数を作成します。
例として投稿のタイトルに設定されている文字列を取得します。

functions.php

<?php
    function get_font_string(){
        //変数初期化
        $str = '';

        //全ての投稿を取得
        $args = array(
            'orderby' => 'date',
            'order' => 'ASC', //日付昇順（古い順）
            'posts_per_page'   => -1, //全件
            'post_type' => 'post',
        );
        $posts_arr = get_posts($args);
        foreach($posts_arr as $post){
            $str .= $post->post_title;
        }
        return urlencode($str); //アルファベット以外はエンコードする
    }
?>

対象ぺージにlink要素を追加

cssより前にフォントを読み込んでおきたいため、wp_head()よりも前に下記を記載します。

header.php

<?php if(is_singular()): /*対象のぺージの条件*/
  $font_str = get_font_string();
?>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300&text=<?php echo $font_str; ?>" rel="stylesheet">
<?php endif; ?>

対象ぺージの条件はWPの条件分岐タグから適切なものを選びます。

スタイルを適用

.titleに文字列を出力するものとして、スタイルを下記のように設定します。

style.css

.title{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
}

参考

Get Started with the Google Fonts API
https://developers.google.com/fonts/docs/getting_started?hl=ja#optimizing_your_font_requests