2020.2.5Webフォントを使ってWEBサイトのデザインを高めるcssweb制作デザインデザインにおいて、フォント選びって大事ですよね。フォントひとつでセンス問われますよね。分かります、とても分かります。ユーザーが必ず目を向けるポイントです。訴求したいモノのイメージやコンセプトをいかに表現できるか、デザイナーならこだわりたい要素です。そんなセンスの良いフォントを選べるかどうかは別として、Webサイトにおいてもこだわりのあるフォント、おしゃれなフォントを使うことでサイトを差別化することができます。その場合はWebフォントを使用することで、どの端末から閲覧しても統一のフォンを表示させることができます。Webフォントとは?Webフォントとはあらかじめサーバーにアップロードされたフォントや、インターネット上のフォントを呼び出し表示されるフォントのことです従来まではそれぞれのデバイスにインストールされたフォントを呼び出し、表示させていました。そのためデザイナーの意図しないフォントが表示されることもありました。Webフォントを使えば、どの端末から閲覧しても同じフォントを表示させることが可能ということです。いい感じのフォントをダウンロードまずは、自分のイメージに合ったフォント、サイトに合ういい感じのフォントを見つけてください。下記のサイトなどからいくつかいいのが見つけることができると思います。FREEフロップフォントロゴたいぷゴシックダウンロードしたらフォントが入っているフォルダに設置し、サーバーへアップロードします。CSSに記述する先ほどダウンロードしたいい感じのフォントを使用するためのコードをCSSに追加していきます。'フォントの名前';}@font-face@font-faceでフォントを読み込みます。サーバーまたはローカルにインストールされたフォントのどちらかからも読み込むことができます。フォントを指定するときに記述する任意のフォント前を書きます。font-family、fontプロパティを使うときに、ここで指定した名前のWebフォントが反映されます。formatformatはフォントの形式を指定します。指定できる値は以下のとおりです。SVGフォント複数のフォントを定義する複数のフォントを定義するには、@font-familyを複数定義します。Fontsは完全無料で様々なフォントを使用することができます。Fontsには8つの日本語フォントが登録されています。欧文のフォントは豊富にあるためアルファベットのみ適用させるやり方も一つの手です。これだけで見栄えはグッとよくなります。使ってみたいってときは簡単に導入できるため便利かと思います。サブセット化で容量を減らす日本語フォントはひらがな、カタカナに加え、無数の漢字が含まれるため文字数が多くなルためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。これは重すぎて表示に時間がかかります。日本語フォントはサブセット化することで容量を軽くする事ができます。フォントに含まれる文字の中から必要な文字だけを抜き出しファイルサイズを小さくします。サブセット化の方法はこちらをご参照ください。リッキー10分でできる!WordPressのローカル環境が簡単に構築できる「Local」の使い方wordpress。