おしゃれなフォントを探すならGoogle Fonts APIを使おう【HTML&CSS】

HTML&CSS

　こんにちは。かじです。

　WebサイトやWebサービスを作ってるけど、なんか字体のデザインが作っているもののトンマナに合わないなという経験はありますでしょうか。

　今回は、そんな方に向けてGoogle Fontsを紹介します。

1.Google Fontsとは

　Google Fontsとは、Googleが提供しているWebフォントサービスになります。APIとして提供しているため、インストールなど複雑な作業は不要で、使用する際は、APIを呼び出して、CSSに埋め込むだけと簡単に使用の開始ができます。

　詳細は下記サイトをご覧ください。

Google Fonts  |  Google for Developers
ウェブサイトで使用する高品質のフォント。
developers.google.com

2.Google Fontsの使い方

　まずは、下記リンクから、好きなフォントを選びます。

Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com

　次の画面で「Get Font」をクリックします。

　次に「Get embed code」をクリックし、「@import url()」の部分をコピーし、CSSファイルに記載します。

　あとは、フォントを適用したい要素のfont-familyを設定していきます。

　サンプルとして下記を参考にしてください。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jersey+10+Charted&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
        h1.charted
        {
            font-family: "Jersey 10 Charted", sans-serif;
        }
    </style>
</head>
<body>  
        <h1 class="charted">Charted H1</h1>
        <h1>Normal H1</h1>
</body>
</html>

3.アイコンも提供しているGoogle Fonts

　Google Fontsではフォントだけでなく、アイコンも無料で提供しています。

　フォント同様APIを読み込んで、CSSを適用するだけでも使用できますし、PNGやSVGファイルとしてもダウンロードできます。サービスを作ろうとしたときに、いい素材が見つからないという時は、ぜひ使用してみてください。

　今回はここまでになります。最後まで閲覧ださりありがとうございました。

コメント

タイトルとURLをコピーしました