Zenn
📖

IBM Plex Sans JPをWebフォントとして使う

2021/08/11に公開
Scss
font
webフォント
tech

話題のIBM Plex Sans JPをWebフォントとして使ってみました。

公式に配布されているファイルを配置して読み込むだけなので簡単です。
Google Fontsでも英フォント(IBM Plex Sans, IBM Plex Serifなど)は配信されているので、JPもそのうちくるでしょう。

実際に使ってみる

ダウンロード

https://github.com/IBM/plex/releases
ここから最新のリリース(2021/08現在、v5.2.1)を選択し、Web.zipと書かれたファイルをダウンロードします。

必要なファイルの選定

font-familyとして使うために必要なファイルは下記の2種類です。

  • フォントの実体 (複数ファイルなのでディレクトリごと使用)
    (Web/IBM-Plex-Sans-JP/fonts/...)
  • フォントを読み込むCSS
    (Web/css/ibm-plex-sans-jp.min.css)

ダウンロードしたファイル(Web.zip)を解凍し、/assets/〜に配置します。

/assets/IBM-Plex-Sans-JP/fonts/...
/assets/css/ibm-plex-sans-jp.min.css

CSSの読み込みと、font-familyの指定

上記のibm-plex-sans-jp.min.cssを読み込み、font-familyを指定すれば完了です！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>IBM Plex Sans JP Test</title>
<link rel="stylesheet" href="/assets/css/ibm-plex-sans-jp.min.css">
<style>body {font-family: 'IBM Plex Sans JP'}</style>
</head>
<body>
  <p>IBM Plex Sans JPで表示されます。</p>
</body>
</html>

CSSとフォントの実体の配置場所を変更する

フォントファイルを配置するディレクトリは、CSSファイルから見た相対パスで指定されています。上記の配置で読み込めている理由は、デフォルトでパスが../に設定されているためです。

SCSS

全てSCSSで管理されているので、相対パスの設定さえ変更すれば、環境に合わせたCSSファイルを生成することができます。

Dart Sass

ちなみに、node-sass(LibSass)ではなくDart Sassが使われています。
VS CodeならDartJS Sass Compiler and Sass Watcher、
gulpなら以下のように指定する必要があります。

gulpfile.js
const scss = require('gulp-sass')(require('sass'));

本題ではないのでコンパイル方法は省略します。

SCSSの編集

基本的に、Web/scss/ibm-plex.scssを編集するだけでOKです。

ibm-plex.scss (元ファイル)
$font-prefix: '..' !default;

@import 'mono/index';
@import 'sans/index';
@import 'sans-condensed/index';
@import 'sans-hebrew/index';
@import 'sans-devanagari/index';
@import 'sans-thai/index';
@import 'sans-thai-looped/index';
@import 'serif/index';
@import 'sans-arabic/index';

1行目の$font-prefixが、CSSファイルから見たフォントディレクトリへの相対パスになっているので、ここを環境に合わせて編集します。
また、v5.2.1ではJPを読み込んでいないので、JPだけ読み込むように変更します。

ibm-plex.scss (修正後)
$font-prefix: '../fonts' !default;

@import 'sans-jp/index';

このSCSSをコンパイルし、ファイルを配置すれば完了です！なんて簡単。

/assets/fonts/IBM-Plex-Sans-JP/fonts/...
/assets/css/ibm-plex.css

このフォントは、個人的にはアルファベットが可愛めで読みやすくて好きです。ひらがなも特徴的ですが、空間を最大限に広く使って読みやすさを重視している感じ？にみえます。
Webフォントとしての利用も今後増えていくんじゃないでしょうか。

Discussion