こんにちは、Wolphtypeです。いつの間にか9月が終わっていました。そして10月ももう1/3が過ぎようとしています。恐ろしい。さて、大学の課題で書体を作っていたときは、展示などで何かと見せる機会があり、その度に何となくタイプテスターを実装していました。しかし、今回ホームページを作るにあたって、もう少し使いまわせるような、使いやすいテスターを作りたいと考え、今回 1. OpenType機能が使えること 2. バリアブルフォントが扱えること 3. 既存のスタイル選択もできること を目標にタイプテスターを作りました。結果、まあまあ今後も使えそうなものができたので、同じようにタイプテスターを使いたい人もいるかもしれませんし、CodePenで公開してみようと思います。なお、JavaScriptでも簡単にできるかと思いますが、気分でjQueryで書いてしまいました。仕組みは単純なので書き換えていただければと思います。
See the Pen OpenType & Variable Type Tester by Masaki Ando (@blacktails2) on CodePen.
カスタマイズがしやすいように、デザインは簡素なものになっています。バリエーションは3種類に分かれており、1つ目は「font-weightとfont-styleでスタイル指定をするもの」、2つ目は「font-familyでスタイル指定をするもの」、3つ目は「バリアブルフォントでスタイルを変更するもの」です。
自分は本来こちらの方が正しいと思いつつもfont-weightでウェイトを変更するのはあまり好まないのですが（というのも、設定によってはブラウザが太らせた文字が表示されることがあるため）、Google FontsやWebフォントサービスではこの形式で配信されていることもあり、font-weightとfont-styleバージョンは新しく書きました。
また、バリアブルフォントでは問題ないですが、ドロップダウンでスタイルを選択する場合、選択直後にフォールバックフォントが一瞬表示されて画面がチラチラする場合があります。その時は、<link rel="preload" href="path" as="font" type="font/woff2" crossorigin />かJavaScriptを使ってプリロードを行うことで解消できます。
基本的にはtypefaceクラスを持っているdivのidを変更すれば使用できますが、OpenType機能を追加したい、バリアブルフォントに別軸を追加したいなどがあると思うので、簡単にカスタマイズ方法を説明します。
1書体のテスターは全体をdivで囲い、id='koga'のように書体名などでidをつけておき、それをJavaScriptのセレクタにも適用します。CSSではid単位でfont-familyを指定していますが、UI部分のフォントは変えなくていい、という場合は<textarea>（もしくは<input>）部分のみに書体を適用しておくと良いでしょう。
OpenType機能を増やしたり減らしたりするのは簡単で、checkboxを減らしたり増やしたりすればいいだけです。その際、valueは使用したいOpenType機能のfont-feature-settingsで用いるプロパティを入力してください。プロパティはこちらから確認できます。valueさえ正しければ適用されるので、スタイリングは自由に行って問題ないでしょう。また、kernやligaといったデフォルトで適用されるべきOpenType機能はcheckedにしておくと良いでしょう。.typeface__checkクラスを持っているinputを全部拾うので、特にJavaScriptを変更する必要はありません。
この場合は簡単で、<select>内の<option>を変更します。font-weightおよびfont-styleで指定する場合は、一般的なウェイトとイタリックだけが書体にあるならばvalue='400-normal'のようにウェイトとスタイルをハイフンで繋ぎます（ハイフンで分割され、それぞれがfont-weightとfont-styleに入るようになっています）。ExpandやCondensedの書体を使いたい場合はおそらくこの方法では指定できないので、font-familyを用いて指定することになります。
font-familyでスタイルを指定する場合は、value='koga-sans-book'のようにフォント名を指定します。この際、CSSで@font-faceをする際にハイフンなどでフォント名にスペースを含めないようにすると良いでしょう。font-weight方式、font-family形式どちらにしても、最初に指定したスタイルのoptionをselectedにしておくことをお勧めします。
この方法だと少しカスタマイズが必要になってきます。ウェイトの指定だけならば今のままでも問題はありませんが、複数軸となると多少追加する必要があります。まず、それぞれの軸を調整するスライダーはid='koga-weight'のように固有のidをつけると良いでしょう。min='100' max='900' value='400'のようにその軸の最小値、最大値、デフォルトの値も指定しておきます（それぞれの値はAdobe Illustratorなどで確認できます）。JavaScript部分では、const weight = $(#koga-weight).val();のようにしてそれぞれの値を定数に入れ、$('#koga textarea').css('font-variation-settings', `'wght' ${weight}, 'ital' ${italic}`)のようにそれぞれCSSに適用されるようにします。（4文字のタグはこちらで見られますが、フォントによっては独自のタグを規定している場合もあります。）
だいたいこんなところでしょう。こういった記事を書くのはあまり慣れていないので読みづらいところもあったかもしれませんが、もし何かわからないことなどがあればTwitterなどで気軽に訊いていただけたらと思います。それでは、良いVariable FontとOpenTypeライフを！
Share: Twitter