WebデザイナーのためのCSS3実践講座

「@font_face」を使って自分のサーバーに設置したWebフォントを利用する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Google Fonts」のフォントファイルをダウンロードして、自分のサーバーに設置して利用する方法について、解説致します。
講師:
04:56

字幕

このレッスンでは Google Fonts の― フォントファイルをダウンロードして 自分のサーバーに設置して― 利用する方法について解説していきます まずはダウンロードしてきた こちらの font-face ― というフォルダーの中に入っているこちらの index.html ファイルと― この style.css ファイルを エディッターで開いて下さい そして これがそれらのファイルを 開いた状態です これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは Google Fonts の サイトから自分が使いたいフォントを― 選択してダウンロードするところまで みていきたいと思います それでは ブラウザで Google Fonts のサイトを開きます これが Google Fonts のサイトですね 今回はこちらのサイトからこの Open Sans というフォントを― ダウンロードしてきて 利用してみたいと思います まず こちらの Open Sans の 枠の中にあるこの矢印の― アイコンボタンをクリックします すると このような画面になりますね この画面になったら 次は こちらの矢印ボタンをクリックします そうすると このように Download fonts という画面が― 表示されてきますので この中から こちらの zip ファイルをクリックします すると このように保存場所を聞かれますので デスクトップなどアクセスし易い場所に― 保存してください ダウンロードが完了したら その zip ファイルを解凍して― その中に含まれる Extra‐bold Italic ― と書かれたファイルを 先程ダウンロードしてきた― index.html と 同階層のところに 保存してください その状態を画面で確認すると このような形になっているかと思います このように index.html と style.css のところに― Extra-bold Italic の フォントファイルですね こちらを保存しておきます こちらのフォントファイルは ダウンロードしてきた状態では― 含まれていない状態となっていますので ご自身で Google Fonts から― ダウンロードしてくるようにしてください それでは この状態からエディッターの方に 移ってみたいと思います こちらがダウンロードしてきた index.html ファイルですね 今回はこちらの p タグに対して 先程ダウンロードしてきた― Open Sans の Extra-bold Italic ― のフォントを適用してみたいと思います それでは こちらの style.css ファイルの方を― エディッターで開きます そしたら まずはこちらの @font-face の部分に― 注目してください こちらの @font-face ですが これは自分のサーバー上に設置した― フォントファイルを取り込んで自分の ウエブサイトで利用する事が― 出来るようになる機能です それでは どのように記述しているのか みていきたいと思います まずは こちらの font-family のところで 取り込むフォントの名前を決めてあげます 今回は myFont としています そして 次に こちらのソースの部分で その取り込みたいフォントのパスを― 記述しています 今回は index.html や style.css ファイルと同じ階層に― フォントファイルを設置しているので このようにそのままファイル名を― 記述した状態となっています ここまで記述すれば 準備は完了です 後はこのフォントを適用したい 部分に font-familly で― こちらの myFont と 指定してあげるだけで OK です その部分がこちらの部分となります p クラス スタイル A の中に font-family: ’myFont’ ― と記述していますね この myFont というのはこちらの 上の部分で定義した― 取り込んだフォントの名前となっています そして この下の部分では フォントサイズを 45 ピクセルに設定してあげています それでは この状態でこちらの index.html ファイルを― ブラウザで表示してどのように 見えるのか確認してみましょう こちらがその index.html ファイルをブラウザで表示した状態です このようにきちっとフォントが 適用されているのが分りますね このように @font-face を 利用することによって― 自分のサーバーに設置した フォントファイルを取り込んで― ウエブサイト上に表示させる事が 出来るようになります 以上で レッスンは終了です 今回は Google Fonts の フォントファイルをダウンロードして― 自分のサーバーに設置して 利用する方法について― 解説致しました 以降のレッスンでは ウエブフォントの ホスティングサービスの一つで― Adobe が提供しているタイプキットの ご紹介とその使い方について― 簡単にご紹介していきますので そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

2時間15分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。