ブログで使えるかっこいいWebフォント5選【実装方法も解説】

こんにちは、ゆうが(@yuuuugablog)です。

今回は、ブログで使えるかっこいいWebフォント10選を紹介していきます。

具体的には、Google FontsというGoogle公式のWebフォントを使って実装していきます。

実装方法も解説していきますので、ぜひ最後までご覧ください。

ブログで使えるかっこいいWebフォント10選

①Bebas Neue

Bebas Neueのコードをみる

code

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

code

font-family: 'Bebas Neue', cursive;

②Lobster

Lobsterのコードをみる

code

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

code

font-family: 'Lobster', cursive;

③Caveat

Caveatのコードをみる

code

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">

code

font-family: 'Caveat', cursive;

④Poiret One

Poiret Oneのコードをみる

code

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

code

font-family: 'Poiret One', cursive;

⑤Big Shoulders Stencil Display

Big Shoulders Stencil Displayのコードをみる

code

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@600&display=swap" rel="stylesheet">

code

font-family: 'Big Shoulders Stencil Display', cursive;

Google Fontsの実装方法

では、Google Fontsの実装方法を解説していきます。

まずは、自分が好きなフォントの<link>のほうのコードをコピーしてください。

たとえば、フォントが「Bebas Neue」の場合は、上のほうのコードをコピーしてください。

そしたらWordPressにいき、「外観→テーマ」でheader.phpに先ほどのコードを貼り付けます。

</head>タグの直前に貼り付ければOKです。

つぎに、好きなフォントの下の方のCSSコードをコピーして、自分がフォントスタイルを指定したいStyle.cssにそのまま貼り付けます。

こんな感じで指定してあげればOKです。

それでは今回は以上です。
最後まで見てくださり、ありがとうございました。