日本語WebフォントにNoto Sans CJK JPを指定する時に気を付けたこと
900ライセンスApache License 2.0Noto Sans CJK の配信サービス(余談)Google Fonts : Early Accessでウェブフォントとして配信されている。 Noto Sans Japanese (Japanese) ただフルサイズなので 16MB ぐらいある。さすがに、このサイズは現実的ではない（動作確認には良いかも）。 @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); Noto Sans CJK JP を入手するGoogle Noto Fonts からダウンロードする。 言語ごとにフォントが分けられているので「Noto Sans CJK JP」を選択してダウンロード。 zip 形式で圧縮されているので解凍すると、それぞれの形式のフォントファイルが入
IEでWebフォントを表示させる | demodemo - Webデザイン/アプリ開発/フロトエンド開発のスキルデモ
Chrome やその他のブラウザでは .otf や .ttf であれば、フォントファイルと CSS の記述で表示されますが、IE だけは専用のフォントファイルが必要です。 .eot という形式のフォントファイルを別に用意しておく必要があります。 今回は、WOFFコンバータという通常のフォントファイルを eot に変換してくれるフリーソフトを使用しています。 woff / eot ファイルに変換してくれるソフト WOFFコンバータ eot ファイルに変換したら、otf フォントなどと一緒にサーバーにアップします。 サーバーにアップしたら、CSS で下記のように記述します。 style.css @font-face { font-family: "sample-font"; src: url("./../fonts/sample-font.eot"); src: url("./../fonts
ttcファイルをttfファイルに変換する方法！MacのフォントをWindowsで使う | Aprico
ユーザーの中には、MacとWindowsの両方の環境で作業しているなどの理由で「MacのフォントをWindowsで使いたい」と考えている方もいらっしゃるかと思います。 MacのフォントファイルをWindowsに持っていきインストールしようとしても、そのままではインストールすることができません。Macのフォントファイルの拡張子は「.ttc」なのですが、それをWindowsで使うためには「.ttf」という拡張子に変換する必要があります。 しかし、変換できればMacのフォントファイルをそのままWindowsで使うことができるようになるので、作業などが捗りますよ。この記事では、.ttcファイルを.ttfファイルに変換する方法をご紹介していきます。
「コーポレート・ロゴ」フォントDL – 転職サイト・エージェント情報のLOGOTYPE.JP
「コーポレート・ロゴ」フォント（ver3）の提供情報「コーポレート・ロゴ」（ver3）は、オープンソースの源ノ角ゴシックに会社ロゴタイプ風のひらがな・カタカナを組み合わせ、加工を加えたフリーフォントです。本サイトにて無料にてダウンロードすることができます。WindowsおよびMac OSの主なバージョンに対応しています。 本フォントファイルは、源ノ角ゴシックと同じ SIL Open Font License 1.1 のもとで使用することができます。 「コーポレート・ロゴ」フォントのデザインいわゆる企業やサービスで使われているようなモダンでシンプルなロゴ文字をイメージしたフォントです。そのままロゴタイプとして使用することもおすすめですし、ロゴ作成のベース・フォントにすることも可能です。 ロゴとしての活用例 ※以上のフォント見本にある会社・団体名はすべて架空のものです。 かな文字の中でもカタカ
Googleフォントの使い方: Webフォントの表示の仕組みと最適化
Googleフォントなど、Webフォントのロードはどういう仕組みなのか、どのように対応できるのか、Googleフォントの表示の最適化について紹介します。 当ブログでも日本語のGoogleフォントを導入して、1ヵ月が経ちました。 文字が読みやすくなったという利点は非常に大きいですが、ロードに時間がかかってしまうという欠点もあります。 Web fonts, boy, I don't know キャプチャ: Google Fonts + 日本語 早期アクセス 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Googleフォントのロードに何を注意すべきか Webフォントの実装に役立つリソース Googleフォントの遅延読み込み まとめ Googleフォントのロードに何を注意すべきか 私はロンドンで開催された「Polymer Summit
Noto Sans CJK JP フォントをダウンロードしてサイトに適用する手順 - Qiita
CSSの埋め込み方まで詳細に説明している所がなかったのでまとめてみました。 デモプレビュー 書き出しサンプル + デモデータ 一式 1. フォントダウンロード 2. アプリインストール サブセットフォントメーカー WOFFコンバータ OTF → WOFF + EOT WOFF → TTF http://opentype.jp/woffconv.htm 3. サブセット化 サブセットフォントメーカーを使用してフォントをサブセット化しファイルサイズを削減します。 以下、アスキー文字 + 非漢字文字 + 第1水準漢字でサブセット化すると 16MB→700KB 位になります アスキー文字 !”#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬
Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io
Intro このサイトのフォントに Web Font を適用することにした。 フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。 また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。 フォントサイズの最適化 Noto font は、そもそも豆腐(フォントがなかった場合に代替表示される四角)が出ないように(No-豆腐)することをコンセプトにしているため、フォントの網羅率は非常に高い。 そのため Web Font として利用する場合は、全体だとサイズが大きすぎるため、言語毎に提供されるフォントセットの中から、必要なフォントのみを適用することになる。 本サイトでは、 ASCII 、記号、日本語のフォントを用いる。 しかし、特に網羅された漢字の中には、日常では使わない文字が多々ある。 加えて
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
日本語WEBフォントを使って成功しているサイトまとめ〜webフォントサイト見本帳
集英社オレンジ文庫 集英社の新しい文庫シリーズで、全体的にはフレッシュで手軽な 雰囲気が特徴だと思います。webフォントとしてうつくし明朝体が 使われていて、レトロなミステリーが多いシリーズにマッチしています。 古典的な明朝体では無い、ちょっとライトな雰囲気が面白いと思います。 あえて小さいポイントの本文ではwebフォントを避けることで うまく読みやすさとデザイン性のバランスを保っていると思います。 あとメニュー縦書きなのがフロップデザイン的にポイント高いです。 https://orangebunko.shueisha.co.jp/ USIO Design Project 石垣島の魅力を再発見するプロジェクトのサイト。 綺麗な写真と、やさしい雰囲気のイラストが webフォントフロップデザインフォントにマッチして 手作り感とデザインセンスの両立に成功しています。 サイトの人気と石垣島の魅力を
【保存版】和文のWebフォントサイト25選
Webフォントを使用して、Webサイトを制作すると、表現できるデザインの幅が格段に広がります。 何となく使用方法が難しいと思われがちなWebフォントですが、一度理解できれば意外に簡単です。 以下の記事でWebフォントの使用方法を解説したので、一読することをオススメします。 意外と簡単！Webフォントを理解しよう 今回は、日本語に対応しているWebフォントがダウンロードできるWebサイト25選をご紹介します。 1.Noto Sans Japanese https://www.google.com/get/noto/ Googleが提供しているフォントサイトです。 和文だけではなく、様々な言語の一般的なフォントが揃えられていますので、まず導入として使用してみることをおすすめします。 2.TypeSquare http://typesquare.com/ 日本で最も有名な和文フォントサイトです。
【保存版】Webフォントの使い方と無料のおすすめサイト一覧（日本語・欧文） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか？ 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！
無料で使える明朝体の日本語WEBフォント | Web技術Tips | ホームページ制作のDOE【横浜】
これまではホームページで明朝体を使いたいときは、従来のようにWindows用、Mac用と別のフォントを指定して、別のフォントとして表示させてきた気がします。（例えばWindowsではHGS明朝E、Macではヒラギノ明朝 Pro W6など） WEBフォントを使うとこういった異なるフォントを表示させるということもないのですが、筆者が知っている実践で使えそうな日本語WEBフォントといえばGoogleが提供しているNoto Sansフォントくらいで明朝体のWEBフォントは知りませんでした。 ということで明朝体の日本語WEBフォントについて調べてみます。 WEBフォントを探してみる 以下はいくつかの明朝体フォントをまとめて提供しているサイトです。 TypeSquare 明朝体だけでも19種類から選ぶことができます。 無料で登録ができ、月間1万PV、ドメイン1つ、フォント1つという制限はありますが、通
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像の最適化 | Web | Google Developers
GitHub - minoryorg/Noto-Sans-CJK-JP: サブセット化済みの「Noto Sans CJK JP」（日本語フォント）のCSS付きWebフォント
Entypo
Ionicons: The premium icon pack for Ionic Framework
文字サイズが小さくても、くっきり綺麗に表示されるようデザインされたフリーフォント -Interface font family
IEでもWebフォントが使えることを知ったので勉強してみました
Create Your Own @font-face Kits » Font Squirrel
GitHub - qrac/yakuhanjp: Yakumono-Hankaku Fonts
