toggle
Aikoフォント Aikoフォント Aikoフォント
Sep 4, 2014

あいこフォントの特徴

aikowebfontウェブフォント

フォントの特徴

あいこフォント(Aiko)は20代前後の女性の手書き文字を参考にして作成した書体。近年の女性の文字のクセを取り入れつつも統一感のある書体です。しっかりとした考え方を持ちつつも、女性らしい可愛らしさをもっている。そんな女性像をイメージした書体です。手書きを手本にしている為、漢字に対してカナが小さいデザインになっており、文章、見出しともに読みやすくなっています。

つまり、文字で「キモチ」を表現したいときに威力を発揮するフォントなのです。

Sep 4, 2014

あいこウェブフォントのCSS設定 Aiko-web font

aikowebfontウェブフォント

Aiko-webフォントをウェブフォントとして使う方法
1.サブセット化
日本語フォントは、ひらがな・カタカナ・漢字が含まれるため、ファイル容量が大きくなり読み込みに時間がかかります。読み込み時間の短縮にはサブセット化が必要です。簡単に言えば、使用する文字だけを抜き出したフォントファイルを作成することです。当フォントはこれが、すでに行われており、何もする必要がありません。

2.CSSの指定
[email protected]必要があります。
@font-faceを使ってフォントファイル名とフォントファイルへのパスを指定します。
パスはアップロードするディレクトリのパスなので、各々異なります。
代表的な記述だと以下の様になります。

@font-face {
font-family: ‘Aiko-web’;
src: url(‘パス/Aiko-web.eot’);
src: url(‘パス/Aiko-web.eot?#iefix’) format(‘embedded-opentype’),
url(‘パス/Aiko-web.woff’) format(‘woff’),
url(‘パス/Aiko-web.ttf’) format(‘truetype’);
}

次にCSSでフォントを適応させます。

Sep 4, 2014

日本語ウェブフォントのフォーマットについて

aikowebfontウェブフォント

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

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

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

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

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

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

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

しかしウェブフォントを使えば、見ている人のパソコンに同じフォントがインストールされていなくても、指定したフォントで表示できます。

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

ウェブフォントのファイル形式
TrueType(.ttf)

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

OpenType(.otf)

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

EOT(.eot)

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

WOFF(.woff)

軽量なウェブフォント用に開発されたフォーマット