WEBフォントの書体を指定する方法

index.htmlの<head></head>のあいだにlink要素を使用して、WEBフォント用に用意されたCSSファイルを読み込みます。

Google　Fontsから使用するコードを取得する方法がある。
Google Fontsの日本語ファントまとめページ（https://googlefonts.github.io/japanese/)では、任意のフォント名をクリックするとHTMLとCSSのサンプルコードがコピーできる。

HTMLやCSSのコードをWordPressで表示するには
プラグイン「Crayon Syntax Highlighter」を使うとよい。他にもあるのかな？と探してみたら
「Highlighting Code Block」というのを見つけたので、インストールしてみました。

<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">

こういうのを使ってコードをブログにアップしていたのだとはじめて知りました。
試しに検索してよかった。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="JR仙台駅から徒歩7分、楽しみながらくつろげる猫カフェ「Ring's Garden」。個性豊かなかわいい猫ちゃんたちが、自然体で自由にのんびり過ごしています。多種多様な猫ちゃんがご来店をお待ちしています。">
  <title>Ring's Garden｜仙台市青葉区の猫カフェ</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>

管理画面では、色がついていませんが、公開画面ではちゃんと色がついていたので安心しました。

よかったらシェアしてね！