レンタルサーバーHOME
更新日：2024/7/3
Google Fonts(グーグルフォント)の使用方法
Google Fonts (グーグルフォント)とは
Googleが提供しているWebフォントサービスです。
Google Fontsを使用することで、以下のようなメリットが得られます。
- ページのフォントを統一できる。
サイトやブログのフォントは、見るデバイスに無いフォントが使用されたページの場合、
デバイスごとに近いフォントを自動で読み取って置き換えています。
Google Fontsを使用すると、どのデバイスでも同じフォントを表示できるようになるため、
どの環境から見ても、意図したデザインでサイトやブログを表示できるようになります。 - 商用利用可能なフォントが無料で使える。
Google Fontsは商用・非商用いずれの場合でも、無用で使用可能です。
○Google Fontsの使用方法
1．Google Fontsにアクセスします。
Google Fontsのサイトへアクセスします。
■Google Fonts ： https://fonts.google.com/
2. 使用するフォントを検索します。
Google Fontsの画面で使用するフォントを検索します。
「Filter ＞ Language」とクリックし、言語を「Japanese」に絞ることで、日本語のフォントのみに絞り込みが可能です。
使用したいフォントを見つけたら、クリックします。
クリックすると、フォントの詳細画面が表示されるので、[Get Font]をクリックします。
[Get embed code]をクリックします。
専用のコードが表示されるので、確認します。
3. Webページに専用のコードを記載します。
HTMLファイルの場合のフォント使用方法の一例を以下にご案内します。
確認した専用コードは、HTMLファイルの場合はheadタグ、styleタグ内に記載します。（【文字コード例 - 画像】の赤枠の部分です。）
フォントを使用する部分のclassに指定します。
【文字コード例 - 画像】
こちらのコードを反映させると、このフォントでの表示となります。
【表示が文字化けしてしまう場合】
上部の画像のように文字化けして表示されてしまう場合は、HTMLで文字エンコーディングを指定する必要があります。
文字コードを「UTF-8」を指定してください。（【文字コード例 - 画像】の水色枠の部分です。）
日本語フォントが充実していることはもちろん、英語なども含めると1000種類以上のフォントが用意されているので、
ぜひサイトで使用してみてください。
お疲れさまでした。
 phpやcgiの サーバーテクノロジーを 大容量に生かす 安定稼働格安レンタルサーバー »レンタルサーバー Home |
|
|
|
|---|