Google Fontsでサイトに個性を出す!WordPressでの導入方法解説

Google Fontsとは
WordPressでフォントを変えてみる
別のフォントにする場合
WordPressでWEBアイコンを表示させてみる
まとめ

Google Fontsとは

Google Fontsは名前の通りGoogleが提供しているフォントのことです。

無料で誰でも利用することができます。商用利用もできます。

フォントだけではなくアイコンもあります。

WordPressでフォントを変えてみる

とりあえずGoogle Fontsを1種類組み込んでみましょう。フォントの変化を分かりやすくするためにZen Kurenaidoというフォントを例にします。別のフォントにする場合は後述します。

functions.phpに以下のコードを追加します。

functions.phpに貼り付け

/*-------------------------------------------*/
/* google fontsを使用するためのタグを追加する */
/*-------------------------------------------*/
function googlefonts_addition() {
	$output = '<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=Zen+Kurenaido&display=swap" rel="stylesheet">';
	echo $output;
}
add_action( 'wp_head', 'googlefonts_addition' );

次に、style.cssなどのスタイルシートに以下を貼り付けます。

スタイルシートに貼り付け

body {
	font-family: "Zen Kurenaido", sans-serif;
	font-weight: 400;
	font-style: normal;
}

ホームページ全体にフォントを適用させるならbodyで対応できると思います。

フォントが変わっているかホームページ上で確認してみましょう。

フォントが変わった♪

別のフォントにする場合

<head>内にGoogle Fontsを組み込むためのlinkタグの追加とスタイルシートにフォントの定義を行う必要があります。

別のフォントを組み込みたい場合は以下のリンクから探します。

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

こちらにアクセスすると日本語のフォントが表示されます。

気に入ったフォントをクリックしてをクリックします。

その次のページにあると進めます。

Embed code in the <head> of your htmlのコードをすべてコピーしたものを先ほど紹介したfunctions.phpのコード上の変数$outputに代入します。

次にCSS classがEmbed code in the <head> of your htmlの下にありますので、すべてコピーしてスタイルシートに貼り付けます。

WordPressでWEBアイコンを表示させてみる

Google Fontsはアイコンも提供しています。以下のリンクからアイコンの一覧を確認できます。

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design ...

気になったアイコンをクリックします。

右側にメニューが表示されますので、その中にあるVariable icon fontのlinkタグをすべてコピーします。

フォントの手順と同様にリンクを先ほど紹介したfunctions.phpのコードに追加してスタイルシートで見た目を定義します。

/*-------------------------------------------*/
/* google fontsを使用するためのタグを追加する */
/*-------------------------------------------*/
function googlefont_addition() {
	$output = '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />';
	echo $output;
}
add_action( 'wp_head', 'googlefont_addition' );

googlefont_addition関数はfunctions.php内に複数作成しないようにご注意ください。

フォントとアイコンを同時に追加するための例は以下をご確認ください。

function googlefont_addition() {
	$output = '<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=Zen+Kurenaido&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />';
	echo $output;
}
add_action( 'wp_head', 'googlefont_addition' );

次に、ホームページ上にアイコンを表示させます。

Inserting the iconのコードをホームページ上に貼り付けるとアイコンが表示されます。