Parts & Tips

サイト内でGoogle Fontsを利用する

この記事では、サイト内でGoogle Fontsを利用する方法について解説しています。

INFO

本記事は2025年2月28日時点のGoogle Fonts画面での説明です。

Google FontsをWebフォントとして利用する ​

Google Fontsを読み込む ​

Google Fontsのサイトから、利用するフォントを選択します。
フォントの画面で右上の「Get font」ボタンを押下してフォントを追加します。

フォント選択画面のキャプチャ画像

ここでは例として「Noto Sans Japanese」と「Noto Color Emoji」を選択しました。

「Get font」ボタンを押下して遷移した先のページで選択したフォントが追加されていることを確認したら、「Get embed code」ボタンを押下します（「Download all」ボタンを押下すると、フォントファイルをダウンロードできます）

コードコピペ画面のキャプチャ画像

Embed code in the <head> of your htmlと書かれたコードをHTMLファイルの<head></head>内に記述します。<link>と@importどちらを記述しても構いません。

html
<!-- <link>の場合 -->
<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+Color+Emoji&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

<!-- @importの場合 -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans+JP:wght@100..900&display=swap');
</style>

@importを利用する場合は、CSSファイルに直接書くこともできます（CSSファイルの最初の方に記述することをおすすめします）
この場合、<style></style>タグは不要です。

css
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans+JP:wght@100..900&display=swap');

Google Fontsを表示させる ​

Google Fontsで表示したい箇所に、CSSでフォントを指定します。サイト全体のフォントに指定する場合は、bodyに、個別の見出しなどに指定する場合は、それぞれのHTMLタグやclass名に指定します。
指定するフォント名は、「Get embed code」ボタンを押下して表示されるコードのfont-familyに記述されています。

css
/* 以下指定の例 */

body {
  font-weight: 400;
  font-family: 'Noto Sans JP', sans-serif;
}

h2 {
  font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
}

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

絵文字フォント（この記事の例では「Noto Color Emoji」）を利用する場合は、利用環境によって他の文字が絵文字に変換される・表示がおかしくなる場合があるため、font-familyの一番最後に指定することをおすすめします。

css
body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif, 'Noto Color Emoji';
}

サイトを確認して、フォントが変更されていればOKです。

補足 ​

利用するフォントによっては、利用するウェイト（太さ）を選択できるものがあります（Latoなど）
この場合、コードをコピペする画面で個別にチェックを入れて利用するウェイトを選択してください。

フォントのウェイト選択画面のキャプチャ画像

以上です。

< Back to Home