google fontの使い方。図を使って説明します。

スポンサーリンク
google fontの使い方。図を使って説明します。小売りの役立ちMemo
スポンサーリンク

google fontの使い方説明

google fontの使い方説明

Webの学習をしている際に出てくるgooglefontの使用方法に関して説明します。

フリーで使用できるフォントなので使用頻度が非常に高いと思います。
※有料もありますのでお気をつけください。

CDNを活用してコードをコピペすれば簡単にお気に入りのフォントを使用することができます。

では、実際の使い方を説明していきます。

簡単なHTMLを作成する。

ではまず簡単なHTMLの記述をしていきます。

<!DOCTYPE html>
<html lang=”ja”>
<head>   
<meta charset=”UTF-8″>    
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>    
<title>Document</title> 
 <style>   
</style>
</head>
<body>   
 <p>HELLO WORLD</p>   
 </body>
</html>

こんな感じで簡単なHTMLを記入していきます。

すると画面上はこんな感じに入力されると思います。

Document

HELLO WORLD

google fontのサイトから好きなフォントを選ぼう!

では、次にgoogle fontのサイトに行きます。google fontのサイトURLはコチラ↓

GoogleFontサイト

サイトを開くと以下の画面が表示されます。

google fontのサイトから好きなフォントを選ぼう①

Searchから好きなフォントを選んで表示させましょう。

今回はtekoと入力してフォントを表示させたいと思います。

すると以下の画面が表示されます。↓

google fontのサイトから好きなフォントを選ぼう!②

今回は赤枠部分のTekoといったフォントを選択してみます。

選択方法は以下を参照してください。

google fontのサイトから好きなフォントを選ぼう!③

Medium500を選択して赤枠部分の+Select this styleをクリックしてみます。

すると必要なリンクタグとCSSが表示されますのでこちらをコピーします。
※赤枠で囲っている部分になります。

google fontのサイトから好きなフォントを選ぼう!④

HTMLファイルに入力しよう!

HTMLファイルに入力しよう!

実際にHTMLに記載していった例が以下になります。

<!DOCTYPE html>
<html lang=”ja”>  
<head>  
  <meta charset=”UTF-8″ />
   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />  
  <title>Document</title>  
  <link      href=”https://fonts.googleapis.com/css2family=Teko:wght@300;500&display=swap”      rel=”stylesheet”    />   
 <style>     
 p  {    
    font-family: “Teko”, sans-serif;     
 }    
</style>  
</head>  
<body> 
  <p>HELLO WORLD</p> 
 </body>
</html>

黄色く塗りつぶしているのが今回のリンクタグとCSSになります。CSSに関しては今回はHTMLファイルの中にわかりやすいと思い入力していますが、もちろん外部ファイルとしても全く問題ありません。

その場合はリンクタグは通常通り<head>の中に記載して、font-familyは外部ファイルに記入するイメージになります。

では実際どのようなフォントで表示されるか見てみましょう。

Document

HELLO WORLD

ちゃんとフォントが変更されていますね。

以上でgoogle fontの使用方法の説明は終わりになります。

とっても簡単ですね。いろいろな講座など受けたり勉強していると、必ず使う技術でもありますので覚えておくと良いと思います。

小売りの役立ちMemo
スポンサーリンク
かかせりNOTE(ノート)
タイトルとURLをコピーしました