目次
Googleフォントを探す
Googleフォント公式ページで、お目当てのフォントを探し、さらにその中で使いたいフォントファミリーをクリックする（複数クリック可）。
HTML・CSSサイトの場合
Googleフォントのフォントファミリーを選択すると、右サイドにコピペ用のコードが出現します。実装はそれをコピペしてくいくイメージです。
HTML｜headタグの記述
まずはHTMLのheadタグ内に下の図の②のリンクをコピーして貼り付けます。
下にGoogleフォントの「Use on the web」の「<link>」のコードを貼り付けた例をおいておきます。。貼り付ける位置はリセットCSSよりも下側にします。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">CSS
セレクター「body」に対して、Googleフォント名を先頭に書き込みます。
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}Googleフォントの名称は、Googleフォント公式ページの「CSS rules to specify families」の中に書かれたものと同じにすること（下の図参照）。この例では、「Noto Sans JP」。
WordPressの場合
HTML・CSSサイトのようにheadタグ内に書く場合は、上で紹介したHTML・CSSサイトと同じです。
しかし、WordPressの場合、functions.phpにCSSリンクを記述するのが通例ですので、以下の方法を説明していきます。
functions.php
functions.phpに貼り付ける場合は、３つあるリンクタグのうち、一番下のタグ内のhref属性のみをコピペします。
Googleフォントの部分のみの記述例は下記のとおりです。
// google fonts CSS
wp_enqueue_style('noto-sans-jp-css', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap', array(), 'false', 'all');fucntins.phpでは他のCSSやJavaScriptのリンクを一気に読み込みますので、その全文の記述例も下に載せておきますので参考にして下さい。
/*----------------------------------------------------------*/
/* CSSとJavaScriptの読み込み */
/*----------------------------------------------------------*/
function my_script_init()
{
// swiper CSS
wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css', array(), 'false', 'all');
// font-awesome CSS
wp_enqueue_style('font-awesome-css', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css', array(), 'false', 'all');
// google fonts CSS
wp_enqueue_style('noto-sans-jp-css', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap', array(), 'false', 'all');
// このサイトのCSS
wp_enqueue_style('style-name', get_template_directory_uri() . '/css/style01.min.css', array(), date('YmdGis', filemtime(get_theme_file_path() . '/css/style01.min.css')), 'all');
wp_deregister_script('jquery'); /* footerでjQueryを読み込むようにデフォルトのjQueryを削除修正 */
// jqueryのスクリプト
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js', array(), 'false', true);
// swiperのスクリプト
wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js', array('jquery'), 'false', true);
// このサイトのスクリプト
wp_enqueue_script('home-js', get_template_directory_uri() . '/js/home-script.min.js', array('jquery'), date('YmdGis', filemtime(get_theme_file_path() . '/js/home-script.min.js')), true);
}
add_action('wp_enqueue_scripts', 'my_script_init');関連記事：【WordPress】CSSとJavaScriptをfunctions.phpで読み込ませる方法【キャッシュ対策付き】
あわせて読みたい
【WordPress】CSSとJavaScriptをfunctions.phpで読み込ませる方法【キャッシュ対策・Defer属性付き】
CSSとJavaScriptをfunctions.phpで読み込ませる方法を紹介します。 また、CSSやJSを変更した場合にキャッシュをクリアするためにブラウザをスーパーリロードしなくても...
CSS
上の方で紹介したHTML・CSSサイトの場合と同じです。
