デザインカンプ固有のフォントをCSSで再現する方法

はじめに

先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再現するにはどうすればいいのかについて書いていきます。

今回再現できなかったフォントと代替フォント

今回再現できなかったフォント

今回、デザインデータで指定されていたフォントは、FOT-筑紫B丸ゴシック Stdです。

XDでの表示

代替フォント

代替フォントとして、「Yu gothic」を設定しました。

ブラウザ上の表示

ソースコード

以下のコードを使用して、フォントの設定を行いました。

body {
  font-family:
  "Yu Gothic",
  "Hiragino Kaku Gothic ProN",
  "Helvetica Neue",
  "Helvetica",
  "Hiragino Sans",
  "Arial",
  "Meiryo",
  sans-serif;
}

bodyに対して、優先度の高い順に上からフォントファミリーが適応されます。

それでは、FOT-筑紫B丸ゴシック Stdを再現するには、どうすれば良かったのでしょうか？

Webフォントを使用する

Webフォントを使用すれば、XDで指定されているようなフォントを再現できます。

今回は、Google Fonts ＋日本語を使用していきます。

FOT-筑紫B丸ゴシック Stdの書体に一番近いのは、さわらびゴシックだったので、このフォントを使用します。

HTMLのコードをコピーして、head内に貼り付け、CSSでフォント指定すれば、フォントの設定が完了します。

HTML

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

CSS

body {
  font-family:
   "Sawarabi Gothic",
  "Yu Gothic",
  "Hiragino Kaku Gothic ProN",
  "Helvetica Neue",
  "Helvetica",
  "Hiragino Sans",
  "Arial",
  "Meiryo",
  sans-serif;
}