Google Fonts
公開日：2020-10-18
更新日：2020-10-19
更新日：2020-10-19
1. 概要
Google Fonts は、Google が提供しているフリーのフォントです。
サイトからフォントを探してダウンロードして使うこともできますし、
スタイルシートを読み込んで、サイトで使うこともできます。
サイトからフォントを探してダウンロードして使うこともできますし、
スタイルシートを読み込んで、サイトで使うこともできます。
2. サイトで使う方法
Google Fonts にアクセスします。
フォントを検索して、使いたいフォントをクリックします。
右側の Selected family の Embed をクリックして、
<link>か、@import のソースと、font-family をコピーして使います。
Selected family が表示されていない場合は、右上のメニューをクリックすると表示されます。
フォントを検索して、使いたいフォントをクリックします。
右側の 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>
実行結果：画面
