商用サイトでも無料で利用できる日本語のフリーフォントを紹介します。 ※フォントは全て商用利用も無料ですが、利用の際には必ずライセンスをご確認ください。 最新版を公開!フォントの数が大幅に増えています。 2019年用、日本語のフリーフォント 366種類のまとめ
商用サイトでも無料で利用できる日本語のフリーフォントを紹介します。 ※フォントは全て商用利用も無料ですが、利用の際には必ずライセンスをご確認ください。 最新版を公開!フォントの数が大幅に増えています。 2019年用、日本語のフリーフォント 366種類のまとめ
個人でも商用でも無料利用できる、日本語のフリーフォント727種類を紹介します。 Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる無料フォントが満載です! 前年の647からフリーフォントが50種類くらい増えています! ※サイト閉鎖などでかなりのフォントが減っています。気になったフォントはダウンロードできるうちにダウンロードしておくことをお勧めします。 本記事は定期的に、全フォントを確認して、更新しております。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています(※情報はこの記事の執筆時のもの)。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。 更新情報 2024/6/4: フォントを10種類追加 2024/2/20: フォントを11種類追加 2023/12/26: フ
少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を
目次 やわらか・繊細系の日本語フォント 12種類 力強い太文字系の日本語フォント 8種類 手書き・毛筆系の日本語フォント 6種類 レトロ系の日本語フォント 3種類 コミック系の日本語フォント 2種類 民芸風の日本語フォント 2種類 変わり種の日本語フォント 4種類 フォントを利用する際は必ず規約の確認を 商用利用の可否や条件については調査し記載していますが、商用利用のみ有料版の購入が必要だったり、配布元への連絡だったりする必要なケースもあります。ご利用の際は、必ずフォント配布元サイトで利用規約をご確認ください。 1. やわらか・繊細系の日本語フォント 12種類 落ち着いた優しいデザインにマッチする、繊細なフォントを集めました。癖が強くなく使いやすいものが多いので、重宝できます。 イマジン・ヨコハマフォント イマジン・ヨコハマフォント ひらがな・カタカナに加え、横浜市に関連する漢字が使えます
フロップデザインフォントという商用可の日本語フリーフォント フロップデザインフォントは、どなたでも自由に無料でダウンロードして、商用・非商用問わず使用できる日本語フリーフォントです。このフォントは第二水準の漢字も含まれ、ワープロ、Adobe製グラフィックソフトなどのアプリケーションで自由に加工して使えます。ひらがな、カタカナ、アルファベット、数字をオリジナルで制作し、残りの部分をM+FONTで補いました。またM+FONTで不足している漢字をIPAゴシックで補完しています。 フォントのデザイン特徴について 水平、垂直の線がデザインの基本となっているシンプルなゴシック体の日本語フォントです。暖かみのある手書きを感じさせるひらがな、シャープなイメージのカタカナ、スマートでデザイン性の高いアルファベット(英語)、スタンダードで読みやすい数字とそれぞれ異なる考えに基づいて作られたフォントです。しかし
最早至る所で見聞きするフラットデザイン。Appleを初めGoogleや各ウェブサービス、アプリケーションのUIでもどんどん取り入れられています。ご存知の通り凹凸が無く巧みに配色を考えられた美しいデザインで、しばらくトレンドとなる事は間違いないでしょう。 そこでやはり気になるのがフォント。こだわりだせば切りが無いものですが、一度これというものに出会うとデザインの基盤として大活躍してくれます。 今回Webで見つけて早速持っているMac全てにインストールしたフォントはこちら。 M+ FONTSの紹介 M+ OUTLINE FONTS はコンピュータなどでの個人利用をはじめ、商業目的での利用、フォント内容の改変、改変後の再配布にも制限の無い、自由なライセンスで公開しているアウトラインフォントです。 海外のフォントはかっこいいのがたくさんありますが、結局英数字だけなので日本語を使用したい場合はバラン
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較! 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定(和文等幅)の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境:ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
ふい字 v2.9 → ダウンロードはこちらから (2007.08.01) HuiFont29.lzh 約2.4MB ふい字P v2.9 → ダウンロードはこちらから (2007.08.01) HuiFontP29.lzh 約2.4MB <説明> ・TrueTypeフォント。WinXPまで/MacOS X以降で使えます。 ・日本語2バイトかな文字フォント。ひそかに縦書き対応。 「ふい字」は等幅、「ふい字P」はプロポーショナル。 ・入ってる文字は、 ひらがな/全角・半角カタカナ/全角・半角数字/ 全角・半角アルファベット/ギリシャ文字/ロシア文字/各種記号/ シフトJIS第一水準漢字/シフトJIS第二水準漢字/絵文字 他 ■こっちの「萌」も違ってる気がする……ね……。近々直します。 《軽量版》 ふい字 v1.09 → ダウンロードはこちらから (2007.08.01) HuiFont109.l
フォントhack.jpは日本語フォントの総合案内サイトです フォントhack.jpは、日本語フォントの魅力を皆さまお届けするフリーフォント総合案内サイトです。自由にインストールして利用できる、フリーフォントを中心に紹介しております。またフォントなニュースやフォントに関するブログなど書体に特化したコンテンツを提供しています。 フォントとは? フォントはある様式に従って文字をデザインしてそれをパソコンなどで表示したり、印刷できるようにしたものです。パソコン内では「0」と「1」の組み合わせ(2進法)でデータ化されていますが、液晶画面などに表示するときやプリンターで印刷するときに文字となって表現されます。書体とも呼ばれていますが、これは昔あった写植のなごりで、ゴシック体(カクカクした感じの書体)とかナール(丸文字の書体)などと呼ばれていました。写植とは、写真植字といい、文字が沢山書かれた文字盤の上
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
10,000個以上あっても品質はどうよ、と思う人もいるかもしれませんが、サイトを運営しているのは当ブログともコラボしたfreepik.com! 彼らのアイコンをはじめ、質の高いアイコンが揃っています。 ちなみに、コラボしたのはCelebrations Icon Setです。
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
DiaPro の特徴 DiaPro は印刷用だけでなく、Web Font としてもきれいな表示ができます。たとえば乗り換え案内サイトや携帯アプリでは役に立つでしょう。 DiaPro の記号は OpenType の合字(リガチャー)として定義されています。そのためフォントの適用ができない場合(サーチエンジンのSEOなど)でも意味が読めます 以下のブラウザはテスト済みです:Chrome(Win・Android)・Firefox・Safari(Mac・iOS)・IE10以上 太い数字 時刻表数字を2種類提供しています。 太い数字は、全角数字に置いてあります。また、半角数字の OpenType フィーチャー「タイトル文字(titl)」でも表示可能にしています。 Adobe CS/CC または LibreOffice であれば、半角数字に対し OpenType の「タイトル文字」フィーチャーを適用し
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック(経験)ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です(現時点では個人の見解です)。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか?デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも
古い町並みには、洗練されていないけれど個性的で味のある文字がたくさんあります。このプロジェクトは、そんなステキな文字たちを「のらもじ」と名付け、それを 発見 → 分析 → フォント化 を進めていく活動です。フォントはインストールしてお使い頂けます。 We can find a lot of font in old towns. Those may not be so sophisticated but has unique charm. In this project, we named such characters “NORAMOJI”. We aim to “Find > Analyze > Reproduce” them. Users can intall and use the font.
結論1:アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks(10.9)ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2:「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考: ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり!(2013春) 結論2:新しい字形に対応をしている「ヒ
Webフォントが一般に広まった全盛期には国内外含め様々なWebフォント配信サービスが登場しましたが、まさに戦国時代そのもので、数年後には多くのサービスが終了となってしまいました。 2023年現在、利用されているWebフォントサービスをまとめてみました。 Google Fonts 完全無料で誰でも利用可能ということもあり、現在一番利用されているGoogle Fonts。定番のNoto Sans以外にも、ZEN 角ゴシックやBIZ UDゴシックなど、プロ仕様の日本語フォントも使えます。デスクトップ用のフォントもダウンロード可。 Adobe Fonts Adobe Creative Cloud契約者なら誰でも使えるAdobeのフォントサービス。かつてはTypekitの名でサービス展開されていました。完全に日本語化され昔に比べるととても使いやすくなりました。デスクトップ用のフォントもダウンロード可
日本語Webフォントに革命がおきた. 詳しくは続きを読んでくれ. ちょっと大きく出てみた. 実装についての記事はこちら この記事で言いたいこと 動的に日本語フォントのサブセットを作成してくれるOSSを作りました. サンプルページはこちら 臨時のサンプルページはこちら 追記 herokuが落ちてる,メモリ不足だな.早い所Dockerfileつくろう. 追追記 herokuで運用は再検討したほうがよさそう.「こういうこともできます」の事例ということでひとつ. (やっぱり普通のサーバで動かす分には大丈夫そうな気がする.どうだろう) そんなわけで,どうぞご利用ください。 (ちなみに粗い作りなので,pull-requestやissue投稿をしてくださると嬉しいです.) 何が革命なんだ 革命が起きたというけど,どこが革命なの? 僕には革命が起きたようには思えないけど そんなこと言わんといて,泣くわ.
Webフォントでアイコンをつくろう! ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 (以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。) jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ! 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
今日は、Webフォントの話題を。日本語Webフォントは、「使いたい、でも重くなるからちょっと」という人が多いと思います。でも、グーグルがクラウド上でWebフォントを提供し始めたことで……。 グーグルが日本語のWebフォントをクラウドで提供開始グーグルが日本語のWebフォントを提供し始めていました。実は、2014年7月からあったらしいのですが、私はつい最近になって知りました。 その名も、「Noto Sans Japanese」。このページの表示も、「Noto Sans Japanese」にしてあります。 Noto Sans Japaneseは、6934文字に削減したサブセット版が提供されており、ウェイト(太さ)が7バリエーション。1ウェイトあたり約4.5Mバイトほどのサイズです。 使い方を簡単に説明すると、CSSで定義ファイルを読み込み、 <style> @import url(http:/
作成:2013/10/28 更新:2014/10/24 Webデザイン > 先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フォントに関する知識 1.字間 2.行間 3.字詰め 4.文字組 5.ジャンプ率 6.余白/図版率 7.メリハリをつける 8.書体 9.読みやすいフォントサイズ 10.見やすい文章 11.Webフォント スライド 12.フォントに関するスライド フォントに関する知識 1.字間 字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウト
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く