Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

日本語のフリーフォント、Webでも使える!しかも案外簡単に!Σ('ω'ノ)ノ!

ブログ・HPなどにフォントを導入する際、お金をかけずとも、色々なフォントを使う事が比較的簡単に出来るみたいですね🌟 これは晴天の霹靂でした( ˙◊˙◞ )◞💡⁉︎

 
使うフォントは「フリーフォント」で、個人等で無償で提供されておられるものです。ライセンスも見てみましたが、誰がどの様に使用してもOKというものがほとんどだった印象です。非常にありがたいですね😊
 
 
以下では
   ・フリーフォントについて
   ・ブログ導入前にチェックすべき事
を見ていきたいと思います。「説明はいいからとにかく使いたい」という方は、後日「導入チュートリアル」を別記事にまとめるつもりですので、もうしばらくお待ち下さい🌟(*ฅ•̀ω•́ฅ*)ガオーw🌟乞うご期待という事でw🌟(੭ˊ꒳​ˋ)੭✧
 
 
[ 追記 ]16.07.21 --- 導入チュートリアル ( Noto Sans Japanese β版 ) --- 
 
 
 
 
 
 
 

フリーフォントのファイル形式

DLしたほとんど全てのフォントのファイル形式は…

.otf / .ttf

となっています。

 

 

また、Webではなく "PC" のフォントのファイル形式はどうでしょうか。

PC (Win, Mac ) ➜ .otf / .ttf
 
 
PCには色々なフォントがプリインストールされており、Windowsも、Macintoshも.ttf.otfが、主流の様ですね。
・Accute Systems.com --- http://www.acutesystems.com/fonts.htm
 
 
 

Web導入前のチェック項目 2つ

さて、Webに導入する場合、2つ確認すべき事があります。

一つはライセンス。使って良いかどうか。

二つ目は、ファイル形式。そのまま使えるのか、それともファイル形式を変換するのか。もしくは.otf, .ttfファイルはそもそも使えないのか。

 

 

確認してみました。

 

 

❶ライセンス

いくつかのフォントを実際にDLして、ライセンス等見てみましたが、再利用・配布・商用利用可能なものがほとんどでした。これは本当にありがたいです😊🌟
 
 
ラノベPOPのライセンス
ラノベPOPフォントのライセンス フォントは以下のライセンスに準じます。フォント同梱のテキストをお読み下さい。 * M+ (LICENSE_J,LICENSE_E) Copyright(c) 2015 M+ FONTS PROJECT このフリーフォントをご使用になるには、ダウンロードファイルに含まれる 「M+FONT-TESTFLIGHT」の内容を読みください。ラノベPOP
http://www.fontna.com/blog/1706/
 
 
 
M+ ライセンス
M+ FONTS
Copyright (C) 2002-2014 M+ FONTS PROJECT

LICENSE_J

これらのフォントはフリー(自由な)ソフトウエアです。 あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、 複製、再配布することができますが、全て無保証とさせていただきます。http://mplus-fonts.sourceforge.jp/
 
 

❷Webフォントのファイル形式

💡click onファイル形式( 拡張子)とは?
--- ファイル名の最後に付いている「ーー .text」「ーー.exe 」の青色部分の事。
Web → .otf .ttf .woff.
(PC (Win, Mac ) ➜ .otf, .ttf )
f:id:DDramonQ:20160602210900j:image w3s---http://www.w3schools.com/css/css3_fonts.asp
 
   
 
 
Webフォントとして使用できるのは、.woff 形式だけだと勝手に思い込んでました😅 w DLしたままの.otf /.ttfファイルのままでもWebで使用する事が出来るのですね( ˙◊˙◞ )◞💡⁉︎

 

 

 

 

【結論】フリーフォントはWebでカンタンにすぐに使える⁉︎

 
    ❶Webで使用OK(ライセンス)
    ❷DL後そのまま使用可能(ファイル形式)
 
という事で、簡単にWebでも使えるのですね( ˙◊˙◞ )◞💡⁉︎ わしゃてっきりライセンスの関係で使えない、もしくは、使う事ができたとしても、ファイルを変換したり容量を減らしたりと、色々しないと使えないと思っていました。
 
皆さん!!✨ フリーフォント作成者様に感謝しつつ、バンバン使っていきましょ〜٩(⁼̴̀ꇴ⁼̴́٩)♪ 僕タイポグラフィー好きですねん、タイポグラフィー好きを増やすべくどんどんふきょうしていきますよ〜🌟w٩(⁼̴̀ꇴ⁼̴́٩)♪
Stuff shown on hover

*1:細かい設定をしたい人は「サブセット化( ファイルの軽量化・使用文字を選別する ) 」 等、できます

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̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️