0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Googleフォントを使ってみた htmlファイルのみでサンプルを作成

Posted at

「Googleフォントを使うには」は簡単にできそう、と説明を読んで思いましたが、
いざやってみると、htmlの書き方(イチから書くにはどうするか)をすっかり忘れていました。
ほんとにこれでいいのか、シンプルなサンプルで試してみて、フォントが使えることを確認してから、実際の環境に組み込みたいと思い、やってみた記録です。
 

(1) 使いたいWebフォントを選ぶ
https://fonts.google.com/
LangageでJapaneseを選ぶと、日本語フォントが抽出される
スクリーンショット 2022-11-22 16.29.10.png
        ↓        ↓        ↓
スクリーンショット 2022-11-22 16.31.42.png

下にスクロールすると「Select Regular 数字 +」(+の部分は丸に囲まれた+)があるので、+をクリック

(2) HTMLで指定のコードを追記する
  フォントをlinkタグで指定するか@importで指定するか 
    今回はlinkタグを使用した 
  linkタグをコピーして、headタグ内に貼り付ける

(3) CSSでfont-familyを設定する
 「CSS rules to specify families」の部分をコピーして、headタグ内のstyleタグとして貼り付ける

シンプルなサンプルはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">

    <title>Googleフォントの利用</title>
    <style>
     .fonttest {font-family: 'RocknRoll One', sans-serif; }
    </style>  
</head>
<body>
    <main>
        <p class="fonttest">フォントの指定を行いました</p>
        <p>ここは指定していません</p>
    </main>
</body>
</html>
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?