フリー素材(写真、アイコン、画像、フォント)を紹介しています

WEBサイトに使用したいサンセリフ フリーフォント(Google Font)

Lato

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

https://www.google.com/fonts/specimen/Lato

Roboto

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

https://www.google.com/fonts/specimen/Roboto

Montserrat

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

https://www.google.com/fonts/specimen/Montserrat

Open Sans

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

https://www.google.com/fonts/specimen/Open+Sans

JOSEFIN SANS

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

https://www.google.com/fonts/specimen/Josefin+Sans

Oswald

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

https://www.google.com/fonts/specimen/Oswald (Google Fonts)
http://www.fontsquirrel.com/fonts/oswald (ダウンロードはこちら)

Google Fontsの使い方

  1. リンク先のGoogleFontsページの一番下【Open XXX in Google Fonts】リンクをクリック
  2. 表示されるページのCSS読み込みタグをコピーしてHTMLファイルに貼り付ける
  3. CSSの font-family にフォント名を指定

例:フォント Lato を使用する場合

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<div style="font-family:'Lato';font-size: x-large;">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div>

関連エントリー

No.995
04/07 16:40

edit

フォント