llc.beReady

Art × Web Design

カスタマイズ

webフォントが簡単!フォント変更の方法を2つご紹介!

豊田、刈谷、知立、安城でホームページ制作をやっている合同会社beReadyの奥山です!
根っからの木村カエラファンである僕なのですが、昨日無事来年にまたがって行われるツアーのファンクラブ先行抽選に応募しました。
去年は6回もライブにいって、究極に幸せだったのですが、今年のライブまでの期間が異常に長く感じました。
ここ半年ほど、かなり濃密だったので、時間の感覚が狂っていたんですね。起業して1年ぐらい経ったかと思っていましたが、まだ半年しか経っていませんでした。

人生を長く体感できているので、ラッキーですね笑

というわけで今回はwebデザインを行う際にサイトの印象をかなり左右するwebフォントについての記事です。

webフォントとは??

webフォントとはCSS3から実装された新しい機能で、サーバー上にフォントデータを用意しておくことで、わざわざフォントをインストールしなくても好きなフォントを表示させることができるというものです。

言ってみれば、フォントのクラウド化といった感じですね。
これにより、ロゴとか見出しとかでわざわざ画像を用意しなくてもよくなり、データを軽量化することができます。
また画像ファイルは拡大した際にピクセルがでてきてしまいますが、webフォントでは拡大しても綺麗に表示することができます。

webフォントの使い方

webフォントの使い方は

①使いたいwebフォントを用意する
②CSSでwebフォントスタイルを指定
③CSSでフォントをHTMLに適応させる

これだけで可能です。

とても簡単ですね。

まず使いたいwebフォントを用意します。
使い勝手のいいものだと有料のものも多いですが、「webフォント 無料」とか調べると無料のものも出てくると思います。

次に②のCSSのwebフォントスタイルの指定を行いましょう。

このようにCSSに書いてください。
表示したいフォント名を”フォント名”の箇所に書きます。自分のサーバーではないサイトで表示させようとしている場合は、絶対パスで書く必要があります。

「絶対パス」とは

URLでページを指定して、目的地(情報)がどこにあるのかを確実に伝えること。

(例)

 

これでオッケーです。
ちなみに@font-faceというのは自分のPCにフォントが入っていなくてもweb上から取ってきて、表示させるというものです。
formatというのはフォントの形式を規定しており、truetypeはWindowsもMacどちらにも互換性があり、20年以上使われているフォント形式です。
truetypeにしておけば、かなり無難っていうことですね。

ここまで来れば、もうほとんど完了したも同然。あとは③のCSSでフォントをHTMLに適応させましょう。

例えば見出しのh1に適応させたいなら

こうやって書けば大丈夫です。
これでwebフォントを使用することができるようになります。

さらに簡単な方法

@font-faceを使わずにスクリプトを記入して、使えるものもあります。
Google fontとかはそのいい例ですね。
Google fontでは気に入ったフォントを選ぶとサイトの内に入れるスクリプトを表示してくれます。
それをコピーして、自分のサイトのの直前にペーストするだけでオッケーです。

あとは③の手順と同じように、CSSで紐付けするだけです。

さいごに

なんだかんだ僕もサイトのフォント変えてしまいました笑。
webフォントで変更するのは簡単ですけど、サイトのCSSとかをいじったことのない人には少し難しいかもしれません。
変な風にいじって、サイトのレイアウトが変わってもいけないので、CSSを触る際は元のCSSをどこかにバックアップしておいたほうが良さそうですね。

LEAVE A REPLY

*
*
* (公開されません)