GoogleFontを使ってみる【webデザイン】
GoogleFontを使ってみたら非常に簡単に導入できたので、使い方を残しておきます。
導入方法
GoogleFontのページにアクセス
まずはGoogleFontのページにアクセスしていきましょう。
フォント名を検索
続いてはフォント名を検索していきます。
今回は、「Montserrat（モンセラート）」というフォントを使っていくこととします。
「Gotham」という人気のフォントと非常によく似ています。
「Gotham」は有料なのに対して、「Montserrat」は無料で使うことができます。
「Gotham」にはお金を出したくないが、とりあえずオシャレなフォントを使ってみたい！という人は是非こちらの「Montserrat」を使用してみてはいかがでしょうか。
検索が完了したら今回使いたいフォントをクリックしていきましょう。
使いたいフォントを選択
クリックするとこのような画面が現れます。
文字の太さなども選ぶことができますので、実際に使用したいものが決まったら右側の「SelectThisStyle」をクリックしていきましょう。
複数選択することも可能です。
リンクを取得
使用したいフォントを選択することができたらいよいよリンクを取得していきます。
こちらのコードをHTMLに貼り付けていきましょう。
コードが出てこない方はこちらをクリックしてみてください。
コードを貼り付ける
先ほどのコードをの中に貼り付けていきます。
<!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=Montserrat:ital,wght@1,500&display=swap" rel="stylesheet">
<title>Googleフォント</title>
</head>
<body>
<p style="font-family: Montserrat">TESTTESTTESTTEST</p>
<p>TESTTESTTESTTEST</p>
</body>
</html>比較をするために、pタグを2つ用意して1つのフォントを「Montserrat」に変更していきます。
動作確認
では実際にブラウザで表示をしてきます。
このように上のフォントが「Montserrat」になっていれば成功です！
検証ツールで確認しても、しっかりとフォントが変更されていることが確認できます。
おわりに
設定は以上です。
GoogleFontを使えば、手軽にオシャレなフォントを使用することができます。
是非皆さんも使ってみてください。
