Web Fontについて

ホームページを作る時にメンドクサイのが、タイトルなどをデザインフォントで書いて、画像にしてから貼付ける。

これだと、毎回記事を追加して行くたびに画像に起こさなくてはいけないし、SEO的にはランクが下がる。

・・・で、WEB Fontにしてみたれと思ったので、その際の覚書。

フリーで使えるWeb Fontって最近ではいろいろ有るけど、代表的なのが「Google Fonts」。

Google Fonts

Google Fonts

どっさり有るFontの中から好きなのを選んで、Font毎のCSS(3.Add this code to your website:)に表示されたコードを「head」内にコピペする。基本「Standard」で大丈夫。だめなら、@importやJavascriptも用意されている。(至れり尽くせり。)

headにコピペ

CSSにfont-familyを指定。(4.Integrate the fonts into your CSS:に表示されたプロパティ。)

CSSにfontfamilyをコピペ

段落「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 Edge Web Fonts

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はまだまだ少ないんでもっと増えたらいいナ〜

以上

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL