ホームページを作る時にメンドクサイのが、タイトルなどをデザインフォントで書いて、画像にしてから貼付ける。
これだと、毎回記事を追加して行くたびに画像に起こさなくてはいけないし、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はまだまだ少ないんでもっと増えたらいいナ〜
以上
