ホームページを作る時にメンドクサイのが、タイトルなどをデザインフォントで書いて、画像にしてから貼付ける。
これだと、毎回記事を追加して行くたびに画像に起こさなくてはいけないし、SEO的にはランクが下がる。
・・・で、WEB Fontにしてみたれと思ったので、その際の覚書。
フリーで使えるWeb Fontって最近ではいろいろ有るけど、代表的なのが「Google Fonts」。
Google Fonts
どっさり有るFontの中から好きなのを選んで、Font毎のCSS(3.Add this code to your website:)に表示されたコードを「head」内にコピペする。基本「Standard」で大丈夫。だめなら、@importやJavascriptも用意されている。(至れり尽くせり。)
CSSにfont-familyを指定。(4.Integrate the fonts into your CSS:に表示されたプロパティ。)
段落「p」に指定するならこんな感じ(Noto Serif)ってFontを使用。
p{ font-family: 'Noto Serif', serif; }
あとは、HTMLにpを指定したらNoto Serifが適用される。
実際は、こんな感じ「style type」は外部でもOK
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google web fonts</title> <link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'> <style type="text/css"> p{ font-family: 'Noto Serif', serif; font-size: 100px; } </style> </head> <body> <p> TOYSHOPGRAPHICS </p> </body> </html>
Adobe Edge Web Fonts
「Adobe Edge Web Fonts」は、headにJava scriptをかいて、CSSにfont-familyを指定って感じです。
AdobeのWeb FontsもAdobeに毎月お布施を払って、「Adobe Creative Cloud」に入れば、Adobeのアプリケーションほとんど全てとCloud専用に配信されるアプリケーションと、「Typekit by Adobe」ってのが使えます。あまりに多いんで探すのが大変。
フリーフォントでWeb Font
それでもう一つ、フリーのフォントをWebFontとして適応する方法。
なぜフリーフォント?版権の問題です。
フリーフォントでもフォーマットは色々有りますが、基本配信されてるのは、truetypeかOTF。
でも、Web Fontの場合、IEとかMacとかiPhonやらAndroidとそのバージョンでさまざまです。
クロスブラウザーで使用するためには、IEでは、EOT(.eot)形式、IE以外の主要ブラウザでは、True Type(.ttf)かOpen Type(.otf) iOSの4.0ではTTFもOTFも対応はしてないんで、SVGにする。
これだけのフォーマット全てに対応してるフォントなんてないんで、OTFかTTFを各フォーマットに変換をする。
僕が使ってる変換サービスは、「Online Font Converter」ってサイト変換出来るフォーマットは、atm bin cff dfont otf pfa pfb pfm ps pt3 suit t42 tfm ttc woff eot svg ttfってすごい数で解らんフォーマットばかり。
Web Font用に フリーのOTFフォントを用意して、サイトに読み込み、EOTとTTFとSVGとWOFFに変換。
サイトのディレクトリーに任意で「fonts」ってフォルダーを作って、全てぶち込む。
今回は、tenderness-webfontっていうフォントを使ったんで、これをCSSに@font-faceに指定。
@font-face
@font-face { font-family:'Tenderness'; src:url('../fonts/tenderness-webfont.eot'); //IE用 src:url('../fonts/tenderness-webfont.eot?#iefix') format('embedded-opentype'),//IEの古いの用 url('../fonts/tenderness-webfont.ttf') format('truetype'),//一般ブラウザ用 url('../fonts/tenderness-webfont.svg') format('svg'),//古いiOS用 url('../fonts/tenderness-webfont.woff') format('woff');//IE用 }
上記のフォントをCSSで各エレメントに指定する。
p(段落)に指定。
.p { font-family: Tenderness;//@font-faceのfont-familyを指定。 -webkit-font-smoothing: antialiased;//Wekkitではアンチエイリアスをかける }
とか、いろんな所に適当にクラス指定したい場合、
.webfonts { font-family: Tenderness; -webkit-font-smoothing: antialiased; }
とかをCSSに書いて、h1なり、pなりdivなり適当なタグにクラス指定するとどこでもWebfontが使えます。
モリサワがWeb Fontに参入して期待をしてますが、
日本語のWeb Fontはまだまだ少ないんでもっと増えたらいいナ〜
以上