Webフォント関連の記事一覧

20161022-Google-Fontsでフォントが見つからなかったときの顔文字-00



●Google Fontsのページがリニューアル

Google Fontsのページがリニューアルされ、モダンな感じのサイトに変わりました。

Google Fontsのサービスは、ウェブページで使えるフォントを提供しているページで、指定の通りにHTMLやCSSを角だけで、様々なフォントが使用できるサービスです。


日本語のWebフォントも試験的に何種類か追加され、9種類から選べることが話題になっていますね。

閲覧者のPCにフォントがインストールされていなくても指定したフォントを表示できるウェブフォントは、閲覧者の使用環境にウェブサイトのデザインが左右されないため非常に便利なのですが、アルファベットとは違い文字の種類が多いため日本語に対応したウェブフォントが少ないのも事実。そんな中、Googleが日本語フォント9種類をウェブフォントとして試験的に無料公開しています。

（略）

ウェブフォントとして利用できるようになったのは以下の9種類。もともとGoogleは独自開発したフォント「Noto Sans Japanese」を日本語フォントとして公開していましたが、今回はそれに加えて、「M+ FONTS」や「はんなり明朝」といった日本語フォントがウェブフォント化されています。

無料で使える日本語ウェブフォント9種類をGoogleが公開中（GIGAZINE）
記事の続きを読む

20160318-Illustratorの文字組みや詰めをWebで再現する-00


●Webでタイポグラフィはムダ？

はてなブックマークで話題のページでこんな記述がありました。（以下は原文ママ）

文字の間隔や改行位置がデバイスやユーザーの環境によって変わり同じ見た目を保証できない中、それをコントロールすることに注力すべきでしょうか？それを実装するエンジニアの工数は効果に見合ったものでしょうか？ユーザーはどんなメリットが得らるのでしょうか？何をもって美しいタイポグラフィとするのでしょうか？

Dear Web designer（Medium）

なるほど。

でも、作り手の苦労はクライアントからしたら結構どうでも良くないですか？


クライアントも、何の考えもなしに「紙とWebって同じようにできませんかねぇ」と言っているのではなく、（レイアウトやタイポグラフィ含め）印刷物で表現した世界観をWebでも同じように再現できれば、「紙のカタログは凝っているけど、ウェブはちょっと違うな…（メイリオフォント）」みたいな世界観の断絶を少しは和らげられるのでは、と思って発言されているのだと思います。

それをメディアが違うから…と頭ごなしにバッサリ切ってしまうのは、少し違うと思うのですよね。（もちろん考えなしに発言する人も多いでしょうが）


当然、コストの問題もあると思いますので、（改行位置はともかく）ユーザーの環境で同じように見えて、工数が少なければ良いのか！（ポジティブ思考）と考えて、Illustratorで制作したタイポグラフィ・文字組みを同じようにWebでも反映したいという要望に敢えてチャレンジしてみました。


記事の続きを読む

20160217-日本語WebフォントをCSSでfont-family指定-00

割と間違っている人は多いのかも？


モリサワのWebフォントサービス「TypeSquare」を最近ようやく使い始めて、これは便利だと思い始めている今日この頃、みなさんいかがお過ごしでしょうか。



●目次



●ダメなCSSの書き方

さて、既にタイトル落ちしている気もしますが、TypeSquareでは、

font-family: "リュウミン R-KL","Ryumin Regular KL";
font-family: "A1明朝","A1 Mincho";
font-family: "中ゴシックBBB","Gothic Medium BBB";

と、font-familyに同じフォントの「日本語のフォント名」と「英字のフォント名」を並べて書いてはいけません。

記事の続きを読む

20160214-ネットの反応-Webフォントを滑らかにするCSS-01

「Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）」は想像以上に反応があってビックリしました。


20160214-ネットの反応-Webフォントを滑らかにするCSS-02

はてなブックマークでも200ブックマーク超えってことで、こういうハックっぽいのは関心があるのだなと改めて感じました。


せっかく色々な意見を頂き、知らないこともあったので、自分が後で見返せるようにまとめておきます。（書ける時に随時更新）


記事の続きを読む

20160212-Webフォントを滑らかにするCSS-00

目次



●ブラウザーによってWebフォントの見え方が違う

今更ですが、日本語のWebフォントを会社のサイトで使い始めました。


元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Webフォント - Wikipedia（Webフォント - Wikipedia）


意外と導入は簡単で、そんなに読み込みが重く（遅く）感じることは少ない気がします。

ただ、WebフォントはモリサワのTypeSquareを使っていますが、ブラウザーによって見え方が結構違うのだなと感じました。


Windowsのブラウザーでは、ざっくり言うと、

  • Internet Explorer 11：キレイ
  • Edge 13：そんなにキレイではない
  • Chrome 48：そんなにキレイではない
  • Firefox 44：そんなにキレイではない

と、こんな感じです。

※EgdeはEdgeHTMLのバージョン。ブラウザーのバージョンは25。


意外にもInternet Explorer 11はそのままでOKです（笑）。逆に純正のEdgeはまだ発展途上のためか、そんなにキレイではありません。

記事の続きを読む

20150507-Evernote-ClearlyでNoto-Sans-Japaneseを設定する方法-03

先日「Webを読みやすくするEvernote Clearlyの表示フォントを游ゴシック体・游明朝体にする設定」というエントリーで游ゴシック体・游明朝体を指定する設定を書きましたが、Windows 8.1では游ゴシック体・游明朝体がインストールされていますが、Windows 7では游ゴシック体・游明朝体がインストールされていないので、設定しても意味がありませんでした。

しかし、Clearlyの表示フォントがCSSで指定できるということは、Webフォントを指定することも可能です。

Webフォントなら、サーバーに日本語Webフォントを用意しておけば、どの環境でも同じフォントで表示できます。


というわけで、今回は、Clearlyの表示フォントを日本語Webフォント「Noto Sans Japanese」（別名：源ノ角ゴシック※）にする方法を紹介します。

※正しくは源ノ角ゴシックではありませんが、そっちの方が分かりやすい人もいるのであえてそう書きます。


「Noto Sans Japanese」は、AdobeとGoogleが共同開発しているWebフォントです。

「Noto Sans Japanese」はGoogleのWebフォントのサービスに登録されているので、すぐに使うことができます（参考：日本語ウェブフォント「Noto Sans Japanese」の指定方法（なぜか日本語に適用されない方向け））。

記事の続きを読む

20150306-FontawesomeのMaxCDNからのロード速度-03

画像出典：Font Awesome, the iconic font and CSS toolkit


皆さん、Webフォントの「Font Awesome」使っていますか？

様々なアイコンが入っていて便利ですね。

Bootstrap標準のWebフォントは使用していますが、Font Awesomeも最近よく使用しています。


Font Awesomeの便利なところは、CDNが用意されていて（MaxCDN）、1行を<head>タグ内に追加すればすぐに使えるところ。

以下の1行だけ追加するだけです。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

簡単！

これだけで519のアイコン（2015年3月6日現在）が使用できます。

MaxCDNさん、ありがとう！



●何か引っかかりを感じる…ので計測してみた

こんなに簡単に使えてウェブ制作では大変便利で感謝しまくりですが、使い始めると何か表示に引っかかりを感じるようになりました。

同じようなサイトを作っていても、手抜きをしたサイトと、きちんと作ったサイトでは引っかかり具合が違うなと感じたのです。


手抜きをしたサイトは先程のMaxCDNの1行を書いただけというもので、きちんと作ったサイトは、Font Awesomeのファイルをダウンロードして、使っているサーバーにCSSやフォントファイルをアップロードして、使っているサーバーから読み出すように作ったものです。


MaxCDNは世界中で使用されているCDNなので十分に早いのでしょうけれども、念のため速度を調べてみることにしました。

記事の続きを読む

●Noto Sans Japaneseの指定方法はDTP Transitを

新潟グラム × DTP Boosterの懇親会の時に、スピーカーの鷹野さんに「Noto Sansってウェブフォントの指定の仕方が分からないんですよ〜」と質問したら「あ、それならDTP Transitのサイトソースを見てみて」と言われました。って、今さらって感じですが、その内容について書きかけだったので、書き終えて年末を終わろうかと。


実際、DTP Transitのサイトソースを見たら指定の方法は分かりました。

  • DTP Transit


    • でも、この指定の方法って正式なモノなのか？って思ってしまいました。

    （見たい人は http://www.dtp-transit.jp/css/styles.css の中で「Noto」を検索してね）

    念のため正式な指定の方法をGoogle Fontsのページで確認しておくことは制作者として正しいことかなと。



    ●正式ドキュメントを探してみる

    なぜかって？

    「Noto Sans」で検索して、検索結果で出てきた最初のページを見てみます。

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-01

    画像出典：google font noto sans（Google 検索）



    以下のページが出てきます。

    なんかごちゃごちゃ書いてありますけど、右上に「Open Noto Sans in Google Fonts」って書いてあるのでクリック！

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-02

    画像出典：Noto Sans（Google Fonts）



    するとGoogle FontsのNoto Sansのページが出てきます。「勝ったッ！ 第３部完！」って思うじゃないですか。

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-05

    画像出典：Google Fonts


    記事の続きを読む

    On the Road Manuscript, #1 by Thomas Hawk


    全然Internet Explorer 9を使っていないのですが（※1）、色々調べてみるとInternet Explorer 9のテキストレンダリングの改良がおもしろいので紹介。


    Internet Explorer 9のテキストはなぜInternet Explorer 8より読みやすくなっているのか、というテーマです。

    前回のブログで書いた「IE8とIE9でWebフォントのレンダリングを見比べてみる」 の後半で書いたClearTypeの精度の違いについての補足です。
     
    記事の続きを読む

    The faces behind the typefaces by Gabriel Figueiredo

    しつこいですが、モリサワのTypeSquareをInternet Explorerで検証してみます。

    今回はやはりWindowsではシェアの多いInternet Explorer 8についてです。
    3月のInternet Explorer 6の半強制アップデートで、Windows XPでのInternet Explorer 8の増加も見込まれるので、言及しておかなければならないでしょう。


    Internet Explorer 8では「Internet Explorerのフォントレンダリングは２種類用意されている？」で書いたようなCanvas要素に文字を描くことができませんので、普通のdiv要素やp要素に描かれるものだけということになります。（VMLを使えば別なのかな…？）

    記事の続きを読む

    ブログ著者

    名前：（Google+のプロフィール）

    ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

    お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

    ブログ著者について

    サイト内検索