今回は例として、Google Fontsを使って、28.Butterfly Effectのサイト名に『Poiret One』というフォントを適用してみます。

【１】フォントを決める
Google Fontsへアクセス
一覧から適用させたいフォントを見つけたら『add to collection』の左に並んだアイコンのうち『→』のマークを選択
『Quick Use: フォント名（今回はPoiret One）』と見出しの書かれたページが表示される。

【２】設定をコピー
『3. Add this code to your website:』の項目から、
の部分をコピー

【２＋α】XHTML用に変換
上記の書き方はHTML用ですので、XHTML用に一部修正を加えます。
type="text/css"の後に閉じタグである『 /』（半角スペースとスラッシュ）を追加します。
※『'』が『"』になっていますが、CSS内で記述を統一させているだけなので変更しなくても構いません。
※XHTMLではなくHTMLでページを作られている場合は、変更する必要はありません。

【３】CSS内に貼付け
※<style>の外に記述します
※PCとスマートフォン向けの独自タグの中に記述します。
○良い例

×悪い例


ここまでの作業で、閲覧時にサーバからフォントがダウンロードされます。