4kaku design

マーケティングを勉強しているWebデザイナーのノート

Webフォントを使ったサイト制作をローカルでやっているときに、ローカル環境のフォントをCSSで引っ張ってくるための方法を調べたのでまとめます。
プライベートでの制作はCMS実装までローカル環境で済ませてしまうことが多いので、Webフォントで使いたいフォントと同じものをローカルに入れて確認してみました。


CSSでローカル環境に入っているフォントを指定したい場面とは?


以下のページを参考にさせていただきました。ありがとうございます。

ローカルフォントを指定する

CSS上でフォントのファイルを読み込んで、font-familyで指定するためのフォント名を設定します。IcoMoonで作ったシンボルフォントを読み込む場合とよく似ていますね。

@font-face {
    font-family: 'Test';
    src: local(KozGoPro-ExtraLight);
}

h1.titleLogo {
    font-family: Test , san-serif;
}

リモートのサーバーにアップロードしたフォントも指定することができます。Webフォントとして使用できるかはフォントのライセンスによりますので、フリーフォントだとしても一度規約などをご確認ください。

ローカルのフォント名を調べる

local(hoge) 内で指定するのはフォント名でもファイル名でも大丈夫ですが、フォント名の方がパスを間違える心配がありません。

MacのFontBookからフォント名を調べることができます。(Windowsなら「Windows\Fonts」フォルダで確認できるようです。詳細はこちら

FontBookで調べたいフォントを右クリックし、「Finderに表示」を選ぶとフォントファイルが入っているディレクトリが表示されます。そのファイル名から拡張子(.otfや.ttfなど)を消したものが@font-faceで指定できるフォント名です。


FontBook スクリーンショット

Finderでフォントのファイル名を確認できる


CSSでローカル環境に入っているフォントを指定したい場面とは?


モリサワのWebフォントサービスTypeSquareを使う前提で、ローカル上でCSSを書いていたところ、ローカル環境ではWebフォントが確認できないという壁にぶち当たりました。


typesquare URL登録画面

Webフォントを使うサイトのURLを指定する必要あり


これはフォントワークスのWebフォントサービスFONTPLUSでも同じなんですが、Webフォントを使用するURLを指定→該当サイトに指定されたコードを貼り付けるという作業が必要になります。

今回はローカル環境で制作していたので、当然URLを指定するということができません。リモートのテストサーバーに上げてしまえばいいんですが、せっかくローカルにもモリサワフォントが入っていたのでそちらから引っ張ってくる方法を調べました。

残念ながら、モリサワ、フォントワークスのローカルフォントは引っ張ってこられませんでした。他のフォントは表示できたので、インストール時にFontInstaller(モリサワ)やLETS FontACE(フォントワークス)を使ってライセンスの監視をしているのが原因かと思われます。買い切りのフォントならできるかもしれません。こちらについては引き続き調べてみます。