freeway express & proコミュのWebFontを使う

最近のWebデザインアプリで知名度の上がったWebfont。当然Freeway Express&Proでも利用ができます。

WebfontはGoogleなど予めWeb表示用フォントを用意しているところへアクセスし、表示に利用するというものです。

主なメリットは
画像でないため、検索にかかりやすい。拡大してもきれい。
視覚障害の方などへの利便性(読み上げ機能など)が良い。
持っていないフォントが使える。
などでしょう。

弱点は
英語はGoogleで無料のWebfontがありますが、残念なことに日本語のほとんどは有料のためなかなか使えません。
それとフォントを自分のWebサイト以外に読みにいくため、少し動作が鈍くなる可能性があります。

参考 URL
http://www.google.com/fonts#　(アルファベットのみ)
http://webfont.fontplus.jp/　(日本語・基本有料、登録すると一部に無料のフォントあり)
他にもありますが、"Webfont"で調べてみて下さい。

以下は設定方法です。

コメント(4)

最初
全て
最新の40件

[1] mixiユーザー 07月20日 19:46

1.フォントを選びコードを読み込む(Google Fontで使用)　写真1
　リストの中から使いたいFontを見つける。

2.赤丸をつけた矢印をクリック
　※その時に、フォント名をメモするかしておいて下さい。あとでFreewayのフォントセットを編集する際に便利です。　写真2

3.画面が切り替わると写真3のようなコードが表示されますので、これを"すべて選択"してください。参照画像には間違えてペーストまで書いてありますが、ペースト先はFreewayです。

[2] mixiユーザー 07月20日 19:54

4.さらにコードの下に書き出されているものがあります。これも後で必要なのでGoogle Fontの画面は消さないで下さい。写真4

5.Freewayに戻ります。
上部メニューのページ>HTMLマークアップ(写真5)をクリック

6.マークアップの画面で"</head>タグの後"を選び、"1"のコードをそのままペーストしてOKを押します。文字の最後にスペースが入っていたら消して下さい。写真6

[3] mixiユーザー 07月20日 20:03

6ではGoogle Fontを読みにいくことを設定しました。次にFreewayでのフォントを設定します。

7.上部メニューの編集>フォントセットをクリック。写真7

8."フォントセットを編集"の画面で"新規"をクリック。写真8

9.フォントセットの名前は"2"で示した、フォント名を入力します。
　"4"の四角で示した文字をそのまま入力。"4"と写真9の文字が同じであることを確認して下さい。そしてOK。
※スクリーンフォントはTimesでもなんでもいいです。Webfontなので現在使用されている最新のブラウザーならば表示に問題はないと思います。

[4] mixiユーザー 07月20日 20:14

10.終了するとインスペクタウインドで設定したフォント名が表示されます。テキストデータとして使用できるようになります。プレビューで文字が"画像"でないことを確認してみて下さい。　写真10

基本的には日本語のWebfontもFreewayでの設定方法は同じです。コードがどこに表示されるかは取扱サイトによって変わると思いますのでわからなければ私が試してレポートします。

繰り返しますが、Webfontのメリットはフォントを購入する必要がない、どの環境でも同じフォントで見ることができるということだと思います。願わくはGoogleが日本語フォントを取り扱ってくれることです。

今回はFreeway5.5 Expressで動作確認しています。
設定はコピー&ペーストですみますから、一度お試しください。

ログインすると、みんなのコメントがもっと見れるよ