ホームページ制作をやっている合同会社beReadyの奥山です!根っからの木村カエラファンである僕なのですが、昨日無事来年にまたがって行われるツアーのファンクラブ先行抽選に応募しました。去年は6回もライブにいって、究極に幸せだったのですが、今年のライブまでの期間が異常に長く感じました。ここ半年ほど、かなり濃密だったので、時間の感覚が狂っていたんですね。起業して1年ぐらい経ったかと思っていましたが、まだ半年しか経っていませんでした。人生を長く体感できているので、ラッキーですね笑というわけで今回はwebデザインを行う際にサイトの印象をかなり左右するwebフォントについての記事です。さいごにwebフォントとは??webフォントとはCSS3から実装された新しい機能で、サーバー上にフォントデータを用意しておくことで、わざわざフォントをインストールしなくても好きなフォントを表示させることができるというものです。言ってみれば、フォントのクラウド化といった感じですね。これにより、ロゴとか見出しとかでわざわざ画像を用意しなくてもよくなり、データを軽量化することができます。画像ファイルは拡大した際にピクセルがでてきてしまいますが、webフォントでは拡大しても綺麗に表示することができます。3CSSでフォントをHTMLに適応させるこれだけで可能です。使いたいwebフォントを用意します。無料」とか調べると無料のものも出てくると思います。次に2のCSSのwebフォントスタイルの指定を行いましょう。format(”truetype”);}このようにCSSに書いてください。表示したいフォント名を”フォント名”の箇所に書きます。自分のサーバーではないサイトで表示させようとしている場合は、絶対パスで書く必要があります。「絶対パス」とはURLでページを指定して、目的地(情報)がどこにあるのかを確実に伝えること。format(”truetype”);}これでオッケーです。ちなみに@font-faceというのは自分のPCにフォントが入っていなくてもweb上から取ってきて、表示させるというものです。formatというのはフォントの形式を規定しており、truetypeはWindowsもMacどちらにも互換性があり、20年以上使われているフォント形式です。truetypeにしておけば、かなり無難っていうことですね。ここまで来れば、もうほとんど完了したも同然。あとは3のCSSでフォントをHTMLに適応させましょう。'フォント名';}こうやって書けば大丈夫です。これでwebフォントを使用することができるようになります。簡単な方法@font-faceを使わずにスクリプトを記入して、使えるものもあります。fontとかはそのいい例ですね。fontでは気に入ったフォントを選ぶとサイトの内に入れるスクリプトを表示してくれます。それをコピーして、自分のサイトのの直前にペーストするだけでオッケーです。type='text/css'></head>あとは3の手順と同じように、CSSで紐付けするだけです。さいごになんだかんだ僕もサイトのフォント変えてしまいました笑。webフォントで変更するのは簡単ですけど、サイトのCSSとかをいじったことのない人には少し難しいかもしれません。変な風にいじって、サイトのレイアウトが変わってもいけないので、CSSを触る際は元のCSSをどこかにバックアップしておいたほうが良さそうですね。(公開されません)URL次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。2016起業・独立の前に松陰先生から6つの重要なお話があります。2016起業・独立の前に松陰先生から6つの重要なお話があります。三重県、岐阜県も対応させていただきます。他の地域の方でも電話対応、メール、ビデオ通話で対応しますし、用件によっては直接お会いします。takashi15Aug2016起業・独立の前に松陰先生から6つの重要なお話があります。2016起業・独立の前に松陰先生から6つの重要なお話があります。三重県、岐阜県も対応させていただきます。他の地域の方でも電話対応、メール、ビデオ通話で対応しますし、用件によっては直接お会いします。llc.beReady。