Google Fonts

公開日：2020-10-18 更新日：2020-10-19

1. 概要

Google Fonts は、Google が提供しているフリーのフォントです。
サイトからフォントを探してダウンロードして使うこともできますし、
スタイルシートを読み込んで、サイトで使うこともできます。

2. サイトで使う方法

Google Fonts にアクセスします。
フォントを検索して、使いたいフォントをクリックします。
右側の Selected family の Embed をクリックして、
<link>か、@import のソースと、font-family をコピーして使います。
Selected family が表示されていない場合は、右上のメニューをクリックすると表示されます。

3. サンプル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@900&display=swap" rel="stylesheet">
  </head>
  <body style="margin:0px; padding:4px; background-color:#000; color:#fff;">
    <div style="font-family: 'M PLUS 1p', sans-serif; font-size: 48px;">
      こんにちは。<br />
      abc<br />
      ABC<br />
    </div>
  </body>
</html>

実行結果：画面

Tag

New Article