カテゴリー別アーカイブ: ウェブフォント

type.centerのウェブフォント。圧倒的に格好いい新しいフォント情報サイト

type.center

type.centerという新しい文字のサイトが公開されています。
大日本タイポ組合が編集長を務めていて、デザインもユニーク。
あと、これでもかと日本語WEBフォントが使われていて
いったいどうやってるんだろうと思うところがたくさんあります。
私のようなウェブに詳しくない人は、気になる部分が一杯です。

type.center は「文字による文字のための文字のサイト」。
「文字をつかう人」と「文字をつくる人」の両方に向けて
ニュースやインタビュー記事、独自の連載など
盛り沢山・文字だくさんの内容になっています。

現在上がっている記事だけでもお腹いっぱいの文字一杯。
今後のニュース、文字関連のイベントレポートやインタビュー記事も楽しみです。

またカレンダーは誕生日のタイプデザイナー、きょうが記念日の文字ウンチク
きょう行われる文字イベントなど、毎日楽しめそうです。

今後は「文字と著作権」「文字なぞりによる書体見本」の連載も予定とのこと。
実に楽しみですね。

英文表記 type.center(すべて小文字です)
和文表記 タイプ・センター(ナカグロが入ります)
読み タイプドットセンター(または タイプセンター)
URL http://type.center
サイト公開日 2014年10月1日
問合せメールアドレス [email protected]
twitterアカウント @type_center
facebookページ https://www.facebook.com/type.center.jp

オープンソースの日本語WEBフォントJapanSans。ウェブフォントファンからのフリーフォントの贈り物

japansans日本語webフォント

ウェブフォントファンの仮立ち上げから一ヶ月、ついに正式オープンです。
というわけでフリーフォントの贈り物です。
 
名前はJapanSans(ニホンノSans)でウェブフォント+印刷用フォントのセット。
どんな感じのフォントかはJapanSansのサイトでウェブフォントにJapanSans80を指定しているので見て頂けると一番わかりやすいと思います。
 
「源ノ角ゴシック (Source Han Sans )」をウェブフォント用に表示調整した「かなフォント」。商用・印刷なども含め、あらゆる条件で無償利用することが可能です。
 
JapanSansは100%、90%、80%、70%の幅が選べる等幅で無いフォント。「っ」などの小さな文字はより狭い幅になっています。そのため、使い方によっては狭いスペースに通常よりも文字数を多くできたり、文字間隔をあけて使えば、センスの良い雰囲気を演出できたりと、使うのが楽しいウェブフォント専用書体です。フォントファイルはサブセット化済みでOpenType、Truetype、eot、Woffを収録。漢字も入った印刷用フォントも同時収録しておりWord・Excel・Adobeフォトショップなどでも活用できるフリーフォントです。

 

JapanSansのサイトへ行く

ウェブフォントのクロスドメイン問題について〜WEBフォントトラブルTIPS1

webfontトラブル

WEBフォントの記述において
IE、Firefoxの一部のバージョンではクロスドメイン問題が発生するようです。
つまり、フォントを利用するサイトのドメインと
WEBフォントを設置したサーバのドメインが異なる場合
上手く表示できなかったりするわけです。

この事を忘れていて、無駄に時間を費やしてしまいました。

この問題を解決するのに役立ちそうなページを記録しておきます。

クロスドメイン制約によりFirefoxでFont AwesomeなどのWEBフォントを表示できない
http://blog.lowaivill.com/development/cross-domain/

さくらのサーバーだとIE9以降でwebfontが文字化けする
http://qiita.com/ikedahidenori/items/a33236a40986cd22f37d

WEB フォントをクロスドメインで利用する
http://logicalerror.seesaa.net/article/198146322.html

Webフォントを利用する際に知っておくと役立ちそうなTips
http://kachibito.net/web-design/web-font-tips.html

ホームページ作成サービス「BiNDクラウド」のウェブフォント〜丸明オールドや丸丸ゴシックが使える

bind-webfont

気になるけど、試してない「BiNDクラウド」のウェブフォント。
フォントワークスの書体に加えて、丸明オールドや丸丸ゴシック等
人気のカタオカデザインワークスの29書体が使えるんですよね。
カタオカデザインワークスのフォントが使えるというのは面白い

私のように、ウェブが苦手で、お店とかのホームページが
作りたいという人は良いかもしれない。
ちょっと高いと感じるけど、サーバー・ショッピングカート・
WEB フォントも使えてこの価格は安いと思う。

入門者向けの“エントリー”コースでもショッピングカートや日本語Webフォントなどの機能が利用可能で、初年度は無料で提供される(2年目以降は月額480円、税 …

Visit Website

日本語ウェブフォントを作ろう!Notosans(源ノ角)で日本語webフォント

webfontmaking

ウェブフォントを作ろうと思っても、実際フォントを作るのはたいへん。
とはいえ実際に公式に無料でウェブフォントとして使えるフォントは
M+フォント
Source Han Sans(源ノ角ゴシック)(Noto Sans

IPA FONTは再配布あたるとの回答が出ているので
通常の方法では難しいかもしれません。
そして無条件で改変して、再配布しても大丈夫なのは
おそらく、M+と源ノ角という事になります。

というわけで源ノ角ゴシックを使ってウェブフォント
の作り方を紹介します。

今回はレギュラーに加えて90%、80%、70 %の細長い書体
も同時に作ってみました。普通じゃつまらないので。

フォントを触るときは、やっぱり1つはフォント作成ソフト
があると便利です。
・OTEditかTTEdit
・Fontographer
・Glyphs

ぐらいがメジャーどころでしょう。今回程度であれば
なくてもなんとかなりそうですが。

1.フォントのサブセット化

日本語フォント全部をアップすると数メガ、いや10メガを越えてしまう
場合が多いので、まるごとアップすると、表示に時間がかかり
ウェブサイトしては致命的です。
なので、「かな」やアルファベットやよく使う記号などのみにして
漢字は「メイリオ」や「ヒラギノ」などが自動的に表示される様にします。
これはサブセットフォントメーカーを使って文字を減らします。
ウェブサービスでも、できる所もあります。

今回は4種類のフォントを作りました。
横幅が100%~70%までの4段階を作っています。

webfont作成

サブセットフォントメーカーはすごく簡単です。
フォントを選んで、フォントにしたい文字をテキストで記述するだけ。
日本語ウェブフォント

 

2.ウェブフォントに変換

ウェブフォントの変換にはWOFFコンバータを使います。

日本語ウェブフォント作る

もしすでにインストール済みであれば自動的に立ち上がります。
フォント名はJapanSansとしておきました。
あとは「変換開始」をクリックするくらいです。はいできあがり。
できあがったファイルは以下。サンプルのHTMLファイルも書き出されます。
これは必要ないので削除してください。

webfont作成

 

TrueTypeが必要なら、フォントソフトなどで書き出してください。
ここまで30分。そして適用してみたウェブサイトがこちら。
http://webfontfan.com/japansans/

実際には、調整にかなりの時間を要します。
というのもWindowsはフォントレンダリングが独特なので
多くの場合綺麗に表示されないからです。
とくに今回のフォントのように、微妙で、繊細なラインは
表示の調整が難しくなりがちです。
どちらかというとM+の様に水平のラインが平行な方が
調整はしやすいです。
フォントレンダリングの確認はMac、Windowsの各OSや
IE、Safari、Chrome、Operaなどのブラウザで一通り確認します。
あとはiOSやAndroidなどでも実機で確認できたらしておいた方が良いでしょう。

モノスペースのGoogleフォントをセンス良く使いたい〜ゴシック体に合わせるwebフォント

monofont-googlewebfont欧文モノスペースフォント(等幅フォント)は使い方によっては
日本語のウェブフォントに合わせるフォントとして面白いと思います。
通常、日本語ウェブフォントは等幅です。しかし欧文フォントは
プロポーショナル(可変幅)でウェブページ全体の濃淡にバラツキが出て
それが好まれない場合もあると思いますし、使い方によっては
モノスペースフォントは、単純にかっこいいんですよね。

そこでウェブフォントが簡単に無料で使えるGoogleFonts
良さそうなモノスペースフォントを紹介します。

Anonymous Pro

Anonymous Pro

 

Cousine

Cousine

 

Share Tech Mono

 

firemono

Fira Mono

 

DroidSansMono

Droid Sans Mono

 

Inconsolata

Inconsolata

 

Lekton

Lekton

 

UbuntuMono

Ubuntu Mono

いかがですか?ちょっとした見出しから本文にも使いやすそうな
GoogleFontsを選んでみました。

フォント描画が綺麗&高速になったGoogleChrome37

chrome-webfont

わーい、というか、うぐっと言うか
Chromeのフォントレンダリングが変わりました。
まだIE8やXPが主流の日本では、小さな変化ですが
方向性としては、歓迎です。今作っていた、ウェブフォントも変更ですね。

個人的にはメイリオが今のWindowsの足かせになっていると思うので
噂されている次期OSの次のOSではWin自体の独自レンダリングを変えて欲しい。
VISTAが出たときには、見守っていましたが
OS8.1から游ゴシック・游明朝を入れてしまったので
どっちつかずの方向性になってしまっている気がします。
Googlefontや源ノ角ゴシックのことも含めると
なおさら今のOS・IEの方向性はどっちつかずです。

今後のWindowsOS・IEはオープンで普通を目指して欲しいです。
最近はあまりに独自で囲い込みをしすぎな気がします。

フォントのレンダリングを従来のMicrosoftのGraphics Device InterfaceからMicrosoftのテキストレンダリングAPI、Direct Writeに移行の引用記事

「Google Chrome 37」公開、Windows版はフォント描画を強化、64ビット版も

INTERNET Watch – ‎2014年8月26日‎
Googleは26日、ウェブブラウザー「Google Chrome」の最新安定版となるバージョン37.0.2062.94を公開した。Windows版、Mac版、Linux版がGoogleのサイトからダウンロードできる。既存ユーザーには自動的にアップデートが適用される。 Google Chrome 37では、Windows …

DirectWriteに対応しフォントレンダリングを強化した「Google Chrome 37」安定版がリリース

GIGAZINE – ‎2014年8月26日‎
Google Chromeの安定版「37.0.2062.94」がWindows・Mac・Linux向けにリリースされました。 Chrome Releases: Stable Channel Update http://googlechromereleases.blogspot.jp/2014/08/stable-channel-update_26.html 今回のバージョンアップによる機能追加は以下 …

無料でダウンロードできるWebアイコンフォントFont Awesomeの使い方〜サイズ変更とボタン化

fontawesome

実は日本でよく使われているウェブフォントはアイコンフォントです。

Font Awesome はサイト上でよく使われるアイコンを
ウェブフォントにしたものです。ちょっとした場面で役立ちます。

サイズや色など CSS で様々に調整して利用することができます。
http://fortawesome.github.io/Font-Awesome/

Font Awesome のトップページの『Download』よりダウンロード。

zipファイルを解凍し、サーバーにCSSフォルダ内の
「font-awesome.css」か「font-awesome.min.css」のどちらかと
fontフォルダのフォントをアップロード

難しすぎてよくわからないという人はワードプレスの場合
プラグインもありますのでインストールするのもあります。

例えば<i class=”icon-pencil”></i>やショートコードで鉛筆を表示したサンプル

[icon name=icon-pencil]

センター配置にしつつ、160pxにして、行の高さを160pxにして、リンクを貼ってみたサンプル。

[icon name=icon-pencil]

 

Bootstrapのボタンの中に入れてみたサンプル
[icon name=icon-pencil] 鉛筆です

ちなみにBootstrapのボタンおよびアイコン付きのボタンが簡単に作れるサイト
http://www.thiagocanudo.com.br/bootsbutton/

日本語ウェブフォントって何?

日本語ウェブフォント

日本語ウェブフォントのファイルフォーマット

望みの日本語フォントで表示できるウェブフォント

今まではフォントを指定しても、見ている人の環境に同じフォントがインストールされていなければ、表示されませんでした。

そのため、好みのフォントをPNGやJPEGなどの画像に変えて表示していました。しかしそれには多くのデメリットがあります。

 

1.検索エンジンが読めないのでSEO的に不利

2.訪問者が文字サイズを変更・検索・文字をコピーができない

3.ホームページの修正・更新の作業量が増える

4.翻訳・読み上げソフトが使えない

5.サイト全体のイメージを決める本文には使えない

 

しかしウェブフォントを使えば、見ている人のパソコンに同じフォントがインストールされていなくても、指定したフォントで表示できます。
ただ海外ではすでに多くのサイトが取り入れていますが、日本ではまだ殆ど使われていません。それにはいくつか理由があります。まず日本語ファント自体の読み込みが重い(これは改善されつつあります)。有料で使用できるフォントがあるが使用料やアクセス数制限などの問題から、個人サイトでは気軽に使えない。ウェブフォントファンでは、こういった問題も解決していけるように、いろいろな話題を取り上げていきます。

 

日本語ウェブフォントのファイルフォーマット

ウェブフォントのファイル形式

TrueType(.ttf)

アップルコンピュータとマイクロソフトが共同開発した、パソコン環境で一般的なフォーマット。

OpenType(.otf)

TrueTypeの後継フォントとしてアドビ、マイクロソフトが共同で開発した一般的なフォントフォーマット。

EOT(.eot)

Microsoft開発のウェブフォント用フォントフォーマット。IEのみ対応。

WOFF(.woff)

軽量なウェブフォント用に開発されたフォーマット。モダンブラウザーが対応。

SVG(.svg)

以下は各ブラウザでの対応状況

TrueType
(.ttf)
OpenType
(.otf)
EOT
(.eot)
WOFF
(.woff)
SVG Font
(.svg)
IE 4~ × × × ×
IE 9~ × × ×
Chrome 4~ × ×
Chrome 6~ ×
Safari 3.1~ × ×
FireFox 3.5~ × × ×
FireFox 3.6~ × ×
Opera 10~ × ×
Opera 11.10~ ×
iOS4.0~ × × × ×
iOS4.2~ × ×
Android 2.2~ × × ×

この表で分かる通り少なくとも、2つ以上のファイルフォーマットを指定する必要があります。
(iOS4.0やIE9以前は個人的にはこの際、切りすすても良いと思います)

ウェブフォントについて

フロップデザインのサイトのウェブフォントについて(続)

日本語ウェブフォントまとめ+GoogleWebFont

最新WEBFONT事情〜日本語フリーウェブフォントを表示

日本語ウェブフォントでサイトを明朝体表示。CSSフォント指定

FLOP DESIGN

FONTGRAPHIC