2015/11/10
デザインで使えるGoogleフォントをHTML+CSS付きで表示してくれる「TypeSource」

デザインで使えるGoogleフォントをHTML+CSS付きで表示してくれる「TypeSource」をご紹介します。
これを見ているだけでインスピレーションがどんどん湧いてくることでしょう。
しかも、わざわざGoogleフォントのサイトに行くことなく、その場でHTML+CSSで表示してくれるので大変便利です。
WEBデザインでGoogleフォントを利用する方には、とても使いやすいサービスだと思いますので、ぜひともチェックしてみてください。
WEBデザインで使用できるGoogleフォントをHTML+CSS付きで表示してくれる「TypeSource」
「TypeSource」は、WEBデザインで使用できるGoogleフォントをHTML+CSS付きで表示してくれる便利なサービスです。
もちろん、例示しているGoogleフォントのリンクは貼られていますが、わざわざGoogleフォントのサイトに行かずとも、その場でHTML+CSSで表示してくれるので大変便利です。
見たいフォント例の下に「View Source」というボタンを押すと、画面が切り替わってHTMLとCSSが表示されます。
また、表示されているテキストについても変更可能です。
例示されているフォントにカーソルを合わせると、「Edit Text」と表示されるので、クリックすれば編集できます。
なお、おすすめのGoogleフォントについては、定期的に追加されるようです。
メールアドレスを登録していれば、新しい組み合わせを知らせてくれるので便利です。
これは要チェックです。
TypeSource
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
Googleフォントを使った美しいタイポグラフィに惚れぼれ!「Google Web Fonts Typographic Project」
Googleフォントを使った美しいタイポグラフィをご紹介します。 Googleフォントは無料で使え
-
-
商用無料!デザイナーが選ぶミニマルデザインにマッチする無料の英語・欧文フリーフォント ベスト57
ミニマルデザインにマッチするデザイナーが選んだフリーの英語・欧文フォントをご紹介します。 ミニマル
-
-
商用利用可能な無料の筆記体英語・欧文フォント(スクリプトフォント)65
エレガントなデザインや、ガーリーテイストのデザインに欠かせないのが、筆記体のフォント、いわゆるスクリ
-
-
「このフォントなんだろう?」がわかる!フォント利用者必読書「実例付き フォント字典」
フォント利用者必読の書が登場しました。 その名も「実例付きフォント字典」。 その名のとおり、実際
-
-
タイトルや見出しで活躍する無料の英語/欧文フリーフォント82
タイトルや見出しで活躍する無料の英語/欧文フリーフォントをご紹介します。 私たち日本人が英語/欧文
-
-
ロマンチックな英語/欧文の無料フリーフォント19
ロマンチックな英語/欧文の無料フリーフォントをまとめてみました。 年に数回あるロマンチックなイベン
-
-
いちど食べたらやめれない!美味(ウマ)すぎるフードタイポグラフィがコレクションされた「FOOD TYPE」
食べることもタイポグラフィも大好きです。 では、その2つが同時に体感できるとしたら? それはも
-
-
かすれ具合が人気のベストセラービンテージ風英語/欧文フォント「Veneer」がセール&ディスカウント中
かすれ具合が人気のベストセラービンテージ風英語/欧文フォント「Veneer」がセール&ディスカウント
-
-
フォント作成が簡単に!SVGファイルをドラッグ&ドロップでフォントをつくれる無料サービス「Glyphter」
アイコンをフォント化して利用するケースも増えているかと思います。 今回は、アイコンをはじめとして、
-
-
Googleフォントをタグで検索!目的のGoogleフォントをすぐに見つけられる「Font Library」
Googleフォントをタグで検索できて、目的のGoogleフォントをすぐに見つけられる便利なライブラ