Google Fontsを使ってフォントを変えてみる。【ver.0.4】

Google Fontsというすばらしいサービスがあって、およそ全て把握できないような種類のフォントを無料で使えるので使うことにした。

fonts.google.com

およそ全て把握できないので、"google fonts best 2017"とか"awesome google fonts"とかでググって探す。

Google Fontsを探す用のサービスもある。

katydecorah.com

僕はUbuntuというフォントを使うことにした。

https://fonts.google.com/specimen/Ubuntu

使い方

Google Fontsのページからフォントのlinkタグをコピーして、

f:id:KazmaArakaki:20170514165056g:plain

index.htmlのhead内、ほかのスタイルシート読み込みの前にペーストする。

<head>
  <title>My Portfolio</title>

  <!-- フォントの読み込みが先 -->
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

  <!-- 他のスタイルは後 -->
  <link rel="stylesheet" href="./style.css">
</head>

style.cssfont-familyUbuntuを指定する。

フォント名はGoogle Fontsのlinkタグの下にある。

f:id:KazmaArakaki:20170514165758j:plain

body {
  margin: 0;
  padding: 0;
  color: #666;
  line-height: 1.6;
  font-size: 16px;
  font-weight: 300;
  font-family: "Ubuntu",
      "Helvetica", "Arial",
      "游ゴシック", "YuGothic",
      "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
      "メイリオ", "Meiryo",
      sans-serif;
}

これでおっけー。

BEFORE

f:id:KazmaArakaki:20170514170210j:plain

AFTER

f:id:KazmaArakaki:20170514170107j:plain