シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > iPhone > フリーで利用可能な「Webフォント」iOSやAndroidでも使えます-日本語も少し。
注目記事ピックアップ
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
share0
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
share0
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
スマホ・モバイル
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2011/08/17 19:44

フリーで利用可能な「Webフォント」iOSやAndroidでも使えます-日本語も少し。


WEBフォント

CSSを利用して任意のフォントをユーザーのPC環境に依存せずにWEBページ上で表示することができます。

メリット、デメリットがあるとは思いますが、

サイトをリッチに演出するのにフォントを効果的に使うことができるのはアリだと思います。

メリット:

ブログのタイトルロゴや大見出しなど、いままで画像扱いだったものがテキスト扱いになるので軽くなる。

検索に引っ掛かること。

修正が簡単なことなどでしょうか。

環境に依存せずに同じ見た目にできる効果が一番おおきいかな。

デメリット:

フォントをサーバー上に置いてダウンロードしてくるので重くなりがち?

特に日本語フォントはデータ量が多いので使いどころが難しいですね。

そんなWEBフォント、フリーで使える書体が結構出てきています。

 
まずはGoogleのGoogle Web Fonts 
最近v2を公開しました。
多くのフォントのリストから好きなフォントを選びます。

現在229個のフォントがラインナップされています。



Gloria Hallelujahというフォントを選んでみました。



Quick-use を押すと選んだフォントを自分のページで利用するためのコードが表示されます。

表示されたコードを自分のページへコピーして使います。

自分でサーバーにフォントをアップロードして使うよりも簡単にできちゃいますね。

例:
Gloria Hallelujahというフォントを使ったばあい

<link href=’http://fonts.googleapis.com/css?family=Gloria+Hallelujah’ rel=’stylesheet’ type=’text/css’>
font-family: ‘Gloria Hallelujah’, cursive;

上記をコピペすればOKな簡単仕様。

選択したフォントを試してみることもできます。

フォントはすべてオープンソース。商用利用も無償で利用可能。

気に入ったフォントを“Collection”登録して一 括してダウンロードすることも可能。

残念ながら日本語のフォントは公開されていません。


他にもWEBフォントを利用できるサービスがあったので紹介。



Font Squirrel

こちらは“Google Web Fonts”とは違い、フォントをダウンロードして自分でサーバーにアップして使うタイプのもの。

ブラウザやOSの違いも考慮して、それらに対応したフォント一式がまとめてダウンロードできるのが便利です。



メニューの”@font-face kits”以下に大量にWEBフォントがあります。

“Get Kit”からダウンロードしてみます。

 
journalというフォントをダウンロードしてみました。

ダウンロードしたフォルダの中にはサンプルのHTMLとCSS

IEやiOSなどに対応するためのTTF以外のフォントフォーマット”.eot” “.svg” “.woff”まで用意されています。
例:
JournalRegularというフォントをダウンロードした場合
CSS部分

@font-face {
font-family: ‘JournalRegular’;
src: url(‘journal-webfont.eot’);
src: url(‘journal-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘journal-webfont.woff’) format(‘woff’),
url(‘journal-webfont.ttf’) format(‘truetype’),
url(‘journal-webfont.svg#JournalRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;} 

HTML部分

<link rel=”stylesheet” href=”stylesheet.css” type=”text/css” charset=”utf-8″>
<style type=”text/css” media=”screen”>
h1.fontface {font: 60px/68px ‘JournalRegular’, Arial, sans-serif;letter-spacing: 0;}p.style1 {font: 18px/27px ‘JournalRegular’, Arial, sans-serif;} 

#container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>

みたいな感じになっています。

まあ、ほぼコピペで行けそうな親切設計。

文字を入力してどんな感じに見えるか確認することもできます。

対応ブラウザは以下
  • Safari 5.03
  • IE 6-9
  • Firefox 3.6-4
  • Chrome 8
  • iOS 3.2-4.2
  • Android 2.2-2.3
  • Opera 11
メニューの@font-face Generatorからは手持ちのOTFフォントなどをアップして@font-face kits形式にコンバートしてくれるサービスです。

“.eot” “.svg” “.woff”のコンバートが可能です。

 

 

 

 

■日本語

日本語の場合は洋書体に比べると1書体が重くなってしまうデメリットが目立つので、それほど利用されるケースが多いとは言えないようです…

とはいえ、いくつか紹介します。



ふい字置き場

太っ腹な作者さんによって自由に使える日本語フォントです。

よってwebフォントにも使えるみたいです。

上記のようなフリーなライセンスの日本語フォントは沢山あって、WEBフォント使用もOKと思われますが、確認は各自でしましょう。と思っていたらまとめてくれた方がいたので以下を参照。

WebFonts として利用できるフリーの和文フォント | ヨモツネット

※フォントはライセンスが各作者さんによりさまざまなので、よく確認してから使用することをお勧めします。

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る