はじめに
Webサイトのデザインにおいて、フォントは訪問者に与える印象を大きく左右します。
Google Fontsを活用することで、無料で多彩なフォントを導入し、サイトの雰囲気を簡単に変更できます。
本記事では、Google Fontsの基本からWordPressへの導入方法まで詳しく解説します。
Google Fontsとは？
Google Fontsは、Googleが提供する無料のWebフォントサービスです。さまざまなフォントスタイルを簡単に利用でき、Webサイトのデザインに統一感を持たせることができます。
Google Fontsの導入方法
1. Google Fontsのサイトからフォントを選択
- Google Fonts にアクセス。
- 使用したいフォントを検索し、「Select this style」をクリック。
- 埋め込みコードが表示されるのでコピー。
2. HTMLでGoogle Fontsを適用する方法
以下のコードを<head>内に追加します。
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
そして、CSSでフォントを適用します。
body {
font-family: 'Roboto', sans-serif;
}
3. WordPressにGoogle Fontsを追加する方法
1. テーマのカスタマイズで追加する
- WordPress管理画面で「外観」>「カスタマイズ」に移動。
- 「追加CSS」を開き、以下のコードを追加。
body {
font-family: 'Roboto', sans-serif;
}
- 「公開」をクリックして保存。
2. functions.phpで追加する
functions.phpに以下のコードを追加すると、テーマにGoogle Fontsを組み込むことができます。
function add_google_fonts() {
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', false);
}
add_action('wp_enqueue_scripts', 'add_google_fonts');
3. プラグインを使用する
Google Fontsを簡単に追加できるプラグインを利用するのもおすすめです。
- Easy Google Fonts
- OMGF | Host Google Fonts Locally
まとめ
Google Fontsを活用すると、サイトのデザインを簡単にカスタマイズできます。
テーマのカスタマイズ、functions.phpの編集、またはプラグインの使用など、自分に合った方法で導入してみましょう。
コメント