Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

ブログに『Webフォント( 英語 )』を導入する / Webフォント導入チュートリアル

 

最近ようやくWeb Font の使い方に慣れてきましたw  という事で「ウェブ・フォント/ 導入チュートリアル」を書いてみました?(੭ˊ꒳​ˋ)੭✧

 
 

ブログのフォントを変える( 英語 )

先ずは英語から。
(又後日、日本語のフォント導入チュートリアルも書こうと思っています。今暫く、首を長〜くしてお待ち下さいませ?(*ฅ•̀ω•́ฅ*)w )
 
 
   利用するのは、「GoogleFont」というGoogleが運営している「ウェブで使えるフォント配信サービス(一部有料)」です。英語のフォントは種類も沢山あります。是非色々試してみてください。
( まだ日本語のフォントは無いのです。恐らく今後、日本語も導入されるかとは思いますが、もう暫く気長にお待ち下さい…? )
 
では早速_(▭-▭)✧
 
 
 
 

Web Font( 英語 )導入チュートリアル

今回例として使うのは、『Exo』というフォントです。 
 
 
 

Google Fontでの作業

Google Fonts

f:id:DDramonQ:20160524165600j:plain
❶『Exo』を検索
❷「 Quick Use」をクリック
Click on?
:( 更に表示サンプル観たい人 → "Typecast" をクリック
 

f:id:DDramonQ:20160524165554j:plain

❸フォントウェイト(Font Weigh)を選ぶ
Click on?Font weight
: フォント・ウェイト→ フォントの太さの事/
400(Norml) →ウェブの通常の太さ
700(Bold) → 記事のタイトルによく使われる太さ
 

f:id:DDramonQ:20160524170032p:plain

 <link href='https://fonts.googleapis.com/css?family=Exo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

 
 
 
 

はてなブログでの作業

❺アカウント管理ページ
     ↓↓
 設定
     ↓↓
 詳細設定
❻「headに要素を追加」にペースト

f:id:DDramonQ:20160606210001j:plain

f:id:DDramonQ:20160606205958j:plain

 
❼アカウント管理ページ
 ↓↓
 デザイン
 ↓↓
 カスタマイズ
 ↓↓
 カスタムCSS

f:id:DDramonQ:20160606205955j:plain

❽下のコードをコピペ
body{ font-family :'Exo' ; } 
 
 

f:id:DDramonQ:20160606205952j:plain



 
 
 
 
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️