- HOME
- > BLOG CATEGORY
- 【2021年】 Google Fontsの設定から設置までの流れを解説!!

- お知らせ
- NEW 2025.01.25 【WordPress】MW WP Form セレクトボックスを必須にする方法
- お知らせ
- NEW 2025.01.25 【WordPress】カスタム投稿カテゴリー取得について
- お知らせ
- 2025.01.18 【jQuery】セレクトボックスにアンカーを設定する方法
こんな方に読んでほしい
Google Fonts
について学びたい方へGoogle Fontsとは、Googleが提供する、無料で利用可能なフリーフォントのサービスです。
フォントの代表的な「ゴシック体」、「明朝体」などがあげられますが、Google Fontsでは、デザイン性あふれるフォントがたくさん存在します。
上記では「手書き風」なフォントになっております。
Google Fontsでは、文字の太さ、文字の種類(イタリック:斜め)などの設定も可能になります。
[記事の内容]
Google Fontsとは、Googleが提供する、無料で利用可能なフリーフォントのサービスです。
まずは下記のサイトから「Google Fonts」にアクセスしましょう。
ユーザー登録などは不要です、無料で利用可能です。
では、次に「メニューバー」の解説です。
Serif | 明朝体 |
---|---|
Sans Serif | ゴシック体 |
Display | ディスプレイ |
Handwriting | 手書き風 |
Monospace | 明等幅書体 |
Number of styles | 文字のスタイル数 |
---|---|
Thickness | 文字の太さ |
Slant | 文字の傾斜 |
Width | 文字の幅 |
フォントのソートが可能になります。
Trending | トレンド順 |
---|---|
Most popular | 人気順 |
Newest | 新着順 |
Name | アルファベット順(フォント名) |
使いたいフォントを選択します。
フォントの詳細画面に移動します、詳細画面では、フォントの太さ(Medium、bold)、フォントの種類(italic)などの選択が可能になります。
詳細画面の右にある、「+ Select this style」を押してください。
先程の「+ Select this style」を押すと、「Use on the web」が表示されます。
ラジオボタンの「link」を選択します。
下記のコードlink href="https://fonts.googleapis
から始まるコードをhead
内に追加します。
更に、「CSS rules to specify families」のコードをCSSに追加し完了になります。
head内に貼るコード
<link href="https://fonts.googleapis.com/css2?family=Alegreya&display=swap" rel="stylesheet">
/*--CSS--*/
.font-01 {font-family: 'Alegreya', serif;}
Languagesから、言語の選択が可能になります。
日本語を選択したい場合はプルダウンメニューから「Japanese」を選択してください。
例として、「熊 麒麟」といった複雑な漢字(文字)は四角になり、反映しません。
日本語はひらがな・カタカナ・英数・記号、漢字が存在するため、日本語を使用する際には、注意が必要です。
Google Fontsは、無料で様々なフォントが存在し、デザイン性あふれるフォントがたくさん存在します。
メリットもありますが、デメリットもあります。
デメリットとは、外部のサービスの為、複数のフォントを使用すると、Webサイトの表示速度が遅くなる原因になります。
また、Webサイト全体をGoogle Fontsにするのではく、「見出し」のみにしておきましょう。
本文に使用するのはなるべく避けておきましょう。
今回はこれで以上です。
link href="https://fonts.googleapis
から始まるコードをhead
内に追加します。2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.11
2025.01.11
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog