2021年もあと残り2週間ですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 2021年フォント界の大きなニュースは、Google Fontsに大量の日本語フォントが追加されたことです。Webフォントとして利用できるのはもちろん、オープンソースになったので商用プロジェクトでも無料で利用できます。 というわけで、Google Fontsで利用できるようになった日本語フォントから紹介します。有料だったフォント（砧書体やZENフォントやFontworksなど）もオープンソースのSILライセンス
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
Google Fontsが日本語WEBフォントを正式サポート Chromeでフォントが汚くなる問題をまずなんとかしてほしい ユーザーの端末にインストールされていないフォントを表示できるWEBフォント。便利な反面、日本語など文字数が多いフォントではファイルサイズが大きくなり、通信量が増えてしまうのが難点です。 しかし、そんな日本語フォントをGoogleのWEBフォントサービス「Google Fonts」がサポートしました。といっても、以前から早期アクセスとして提供はされていましたが、正式版になったということのようです。 利用可能なのはゴシック6種 + 明朝2種の8書体。早期アクセスで提供されているものとは書体が異なります。 Noto Sans JPNoto Serif JPSawarabi MinchoSawarabi GothicM PLUS 1pM PLUS Rounded 1cKosu
Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size
Font Awesome アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。 Font Awesome guide and useful tricks you might not know about. by Kiss Patrik 下記は各ポイントを意訳・加筆したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 更新: 2021/2/1現在の最新情報にアップデートしました。 Font Awesomeとは Font Awesomeへの登録方法・アイコンの基本的な使い方 Font Awesome アイコンのサイズの指定方法 Font Awesome リスト用のアイコン Font Awesome アイコンの回転 Font Awesome アイコンのアニメーション Font Awesome アイコンを
Google Fonts + 日本語を使用して、Webサイトやブログがどのように表示されるか試すことができるツール -Fonty | コリス
2018年9月にGoogle Fontsは日本語が正式にサポートされ、既に利用されている人、検討されている人も多いと思います。当ブログでも早期アクセスから使用しています。 日本語の正式サポートに伴い、Google Fontsを使用したさまざまなツールも日本語が利用できるようになりました。 自分のWebサイトやブログに、Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールを紹介します。 参考: Google Fonts + 日本語 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語の使い方 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールはこちら、Fontyです。 登録
Webフォントの表示を最適化するテクニック
Webページに表示するフォントは通常、システムフォントとWebフォントの2種類があります。システムフォントはOSにインストールされているフォントで、Webフォントは表示用にフォントファイルを用意する必要があります。 WebフォントはさまざまなフォントをWebページに使用できるというメリットがありますが、パフォーマンス面でシステムフォントに劣るので使用を控えている人もいるかもしれません。Webフォントのフォントファイルを調整し、読み込みを最適化し、最大速度と最小のFOUTを実現するテクニックを紹介します。 5 steps to faster web fonts by Iain Bean 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Webフォントには最新のファイルフォーマットを使用する 2. font-displ
Webにおいて明朝体はNoto Serif CJKを使うべし -IE11対応版｜TechRacho by BPS株式会社
こんにちは。5月に産休育休から復職したデザイナーのニシです。 最近、健康と体力作りのために筋トレを始めました。毎日昼休みにコヤマさんと一緒に10分ほど筋トレしてます。皆さんもいかがですか。 今回は、レスポンシブサイトをデザイン・コーディングする際に明朝体の指定は何にするのが一番いいのか、試行錯誤した結果得た最適解を書きます。 最初に：結論 先に結論をいうと、 Google FontsのNoto Serif CJK（源ノ明朝）を使う IE11対応のためGoogle Fontsの設定で「Japanese」を必ず選択する です。Japaneseを選択しなかったというだけでかなり、右往左往してしまいました（後述）。 Google Fontsとしては他にも明朝体の選択肢はありますが、癖のない良い感じの明朝体というとやっぱりNoto Serif CJKかなーと思います。しかしいずれ、さわらび明朝も使っ
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーがコンテンツを重視したアプローチの利点を理解するにつれて、タイポグラフィがデザインプロセスで欠かせないものになってきました。 Web上の95％もの情報は文字で書かれています（Oliver Reichenstein氏） しかしタイポグラフィは、その分野に不慣れな人にとって難しいものです。そこで、タイポグラフィのタスクを快適に行えるように、役立つツールリストを用意しました。この記事で取り上げるツールは、適切なタイポグラフィによってより良いデザインを作る助けになるものです。 以下の項目に分けて、ツールを紹介しています。 フォントを選ぶ フォントペアリングとスタイリングを選ぶ フォントに情報の階層を付ける インスピレーションを得る フォントを選ぶ タイポグラフ
Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました
Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました 2019年9月5日 Webサイト制作, 便利ツール Font AwesomeはWebページ上にアイコンを表示させるためのサービス。汎用性の高いシンプルなアイコンが多数用意されています。アイコンの画像をご自身で用意しても構いませんが、このようなサービスを使うと手軽に実装でき、管理もしやすくなるでしょう。昔から愛されてきたこのFont Awesomeですが、少し前からアカウント登録が必要になりました。今回はアカウント登録の手順から基本的な使い方を紹介します。 Font Awesomeのアカウント登録手順 これまではCDNと呼ばれる、誰もが共通で使えるファイルのURLをコピペして使用できていました。しかしこれからはメールアドレスを登録し、個別に割り振られたファイルのURLを使う必要があ
2020年4月18日 Webサイト制作, フォント, 便利ツール Webフォントとしておしゃれなフォントが使えるサービスで人気なのがGoogle Fontsですね。無料で手軽に使える便利サービスです。しかし、Webフォントを提供しているのはGoogleだけではありません。デザイナー御用達のAdobeも「Adobe Fonts」を提供しています。今回はこのAdobe Fontsの使い方を紹介します。 Adobe Fontsとは Adobe FontsはAdobeが提供するフォントライブラリサービスです。以前は「Adobe Typekit」というサービス名でした。15,000 を超えるフォントから必要なだけ選択可能！使用フォント数に制限なし！Adobe CC会員なら追加料金なし！フォントは商用利用もOKです！無料のAdobeアカウントでも約200種類のフォントを利用できますよ。 Photosh
I’ve used Google Fonts in prototypes and in 10M+ MAU products. It’s incredibly easy to get started with and provides an amazing font discovery. That’s also why it’s currently still used on over 42M websites! This convenience has its price: Performance. Many have already pointed out the cost of multiple requests. If you want the remaining speed boost, then you’re best off downloading your used Goog
複数のアイコンを自由に組み合わせて、SVG対応のWebフォントにできるmacOS対応の無料ツールを紹介します。 ソーシャルメディア用のアイコンで作成したり、自分のサイト用のアイコンで作成したり、自分だけのオリジナルのWebフォントを簡単に作成できます。 Webfontの特徴 アイコンを自由に組み合わせ 手元のアイコンを自由に組み合わせて、SVG対応のWebフォントのセットを作成できます。既存のフォントをインポートすることも可能です。 フォントのカスタマイズ アイコンをカスタマイズして、フォントに名前を付けることができます。 フォントのエクスポート フォントには1クリックでエクスポートできます。HTMLやCSSファイルも生成されるので、簡単に利用できます。 フォーマットは、.svg, .ttf, .eot, .woff, .woff2 コラボレーション メンバーを招待し、チームを作成して、共
TypekitはAdobe Fontsになりました #AdobeMAX #AdobeFonts – Adobe Creative Station
The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
グーグル直伝！ CSSとウェブフォントのコア ウェブ バイタル最適化テクニック【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
CSSを少し変えるだけでコア ウェブ バイタル（CWV）を改善できるとしたら？ 「無理でしょ」と思うかもしれないが、けっこう使えるテクニックをグーグルが解説してくれている。 また、今回はさらに「利用していないJavaScriptを削除して、CWV改善＋セキュリティ」という話題もピックアップしている。 少し技術的なトピックだが、知っておいて損はないネタだ。 ほかにも、「コア アルゴリズム アップデートが来たけど来月も来る」「ファーストビューで見えるコンテンツ」「インデックス制限」「リンク否認」などなどなど、あなたのSEOとWebサイト運営に役立つ情報をまとめてお届けする。 2021年初のコア アップデートをグーグルが6月に実施、2部構成の後半は7月に予定ファーストビューでは各ページ固有なコンテンツを見せるべきグーグルのインデックスするページ数に上限はあるのか？不自然リンクへの対処はリンク否認
はじめに Webフォントは無償のものもあり、気軽に利用できる環境になっています。中でもGoogle Fontsを利用している人も多いのではないでしょうか。私もよく使わせてもらっています。 今年、 コーディングしたものの、デザインと見比べると、boldの太さが異なるといったという事があり、Webフォントを使う時の注意点の1つを残しておこうと思います。 以下では Google Fonts の M PLUS 1p を利用する想定の例を挙げながら説明します。（キャプチャはMacのChrome 78.0.3904.108（Official Build） （64 ビット）で表示したものになります） import時に単一のfont-familyで利用する時の問題 Google Fontsのページを参照して、 M PLUS 1p を利用して選択すると、 @import 'https://fonts.goo
2019年12月19日 フォント 2019年もあとわずか！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 過去の年末フォント紹介記事 2018年にリリースされた無料フォント40 2017年にリリースされた無料フォント40 2016年にリリースされた無料フォント30 2015年にリリースされた無料フォント35 日本語フォント とっぽいゴシック 最高にファンキーでロックな見出し用ゴシック体を目指したフォント。お試し版は漢字が含まれていません。 バナナスリップ 力強くもありつつ、丸みがあって可愛らしいですね。インパクトが欲しい、でも堅苦しくしたくない、そんな時におすすめです。 焔明朝フォント オープンソースの源ノ明朝をベースにゆ
07/26 IBM Plex Sans JP、デラゴシック、はんなり明朝追加。ゴシック体三種比較画像を追加。 フリーまたは比較的安い組込み(埋め込み)可能なフォントを厳選して紹介します。 フォントの組込みが必要なインディゲーム開発やアプリ開発、ゲームの有志/プロ翻訳で参考になれば幸いです。ここで取り上げるフォントは商用・同人活動・動画・ポスターでも使用可能なのでその他の方も参考になるはずです。変更や間違いもありうるのでライセンスは必ずご自身で確認してください。 ゲームやアプリでフォントを使う場合は、組込み(埋め込み)と画像として使用する2つの使い方があります。 ほとんどのフォントはゲームやアプリに画像として使用するのはOKでも、組込むとなると別途契約が必要だったり許可されていません。 たとえば、フォントワークスの「LETS」は年間/PC1台につき2万4千円～ですが、組込みやチャット入力の場
Adobeユーザー無料＆商用可！あらゆるジャンルや雰囲気ごとにまとめたフォントパック厳選43個 - PhotoshopVIP
デザインに合ったフォントを探すのにお困りですか。Adobeが今回、40を超えるジャンルや雰囲気、テーマごとに数百個を超える書体をセレクトしたフォントパックを公開したので、今回はご紹介します。 ブランドイメージづくりから、映画ポスター用や政治メッセージの強いものまで、「あらゆる機会」で利用することを目的に、15,000を超えるAdobe Fontコレクションから、各界の著名なデザイナーや団体が、厳選したフォントが揃います。日本語フォントの選定には、モリサワフォントが参加しています。 2018年10月中旬から、毎日ひとつずつ更新されたフォントパックの数は、43個まで増えています。Adobe Creative Cloud サブスクリプションに付属しているので、Adobeユーザーは無料でダウンロードできます。また、ライセンスは付与済みで、すべてのフォントを商用にも個人用にも利用可能です。 Adob
こんにちは。 今回のテーマは「日本語WEBフォント2018」としています。 なぜこのタイトルなのかと申しますと、この記事の内容は2018年時点で、日本語WEBフォントを運用するベストプラクティスではないかと思い、WEBフォント導入を考えているみなさんの参考になればと思い執筆しました。 異論は認めます・・・ Windowsの日本語をなんとかしたい・・・Windowsの標準ブラウザフォントは、游ゴシックやメイリオになります。 しかし、Mac標準のヒラギノと見比べると、全体的に丸っこく子供っぽい印象です。 フォントの印象はそのままWEBデザインの印象に繋がるので、デザイナーとしてはフォントも制御下に置きたいところ。 そこで試していきたい「WEBフォント」。 その運用に至るまでにぶつかった壁と、その乗り越え方をご紹介します。 そもそもWEBフォントは何を使う？ファイルサイズの肥大化フォントレンダリ
Google Fontsで日本語フォントが正式サポート開始！使い方やダウンロード方法など | Web Design Trends
Google Fontsが提供する日本語フォント Google Fontsで2018年9月現在提供されている日本語フォントは、下記の8種類です。 Noto Sans JP Noto Serif JP M PLUS 1p M PLUS Rounded 1c Sawarabi Mincho (さわらび明朝) Sawarabi Gothic (さらわびゴシック) Kosugi Kosugi Maru それぞれのフォントの特徴は、使い方の後でご紹介していきたいと思います。 まず、Google Fontsの日本語フォントの使い方をチェックしていきましょう！ Webフォントとして日本語のGoogle Fontsを使う方法 最初にご紹介するのは、WebフォントとしてのGoogle Fontsの使い方です。 日本語のWebフォントは文字数が多いため通信量が多くなってしまいます。ファイルサイズやページの読み
Google Fontsが正式サポートを開始した日本語ウェブフォント8種類それぞれの特徴と使い方 ｜https://wp.yat-net.com/name
2018年 10月 03日 Google Fontsが正式サポートを開始した日本語ウェブフォント8種類それぞれの特徴と使い方 カテゴリ： Font タグ：ウェブフォント Google Fontsで早期アクセスとして提供されていた日本語ウェブフォントの、正式サポートが始まりました。全部で8種類あるのですが、それぞれのフォントの特徴などを紹介したいと思います。 フォントの紹介 Noto Sans JP GoogleとAdobe が共同開発しているフォントファミリー。コンセプトがフォントセットにない文字を使う時に表示される豆腐文字を撲滅すべく作られたシリーズで、名称のNotoも「no more tofu」からきています。 Noto Sans JP はうろこのないゴシック体で、欧文フォントでいうサンセリフです。（ただしゴシック体のことをサンセリフ体とするのは日本においてであり、本来ゴシック体はブラ
【はてなブログカスタマイズ】noteからの引っ越し はてなって実はすごいのでは（いまさら） - TOMOKO OOSUKI
note→Jimdoのブログ機能→はてなブログへの引っ越し 【はてなブログのカスタマイズで参考になった記事】 ・テーマは「SOHO」を選びました。 ・こちらのページでCSSを生成し、タイトル下にメニューを作りました。 ・画像を常に真ん中に配置するように変えました。 ・フォントをユニバーサルデザインWEBフォントに変えました。 ・文字サイズを少し大きくしました。 ・codocの投げ銭リンクが常に表示されるようにしました。 ・アクセス解析にgoogleアナリティクス・juicerを入れました はてなって、実はすごいのでは（いまさら） 【2021/3/29追記】記事のエクスポートについても詳しく書いてみました。 note→Jimdoのブログ機能→はてなブログへの引っ越し 私は、8月末でnoteをやめて、Jimdo+codocでブログを更新していました。 www.tomokooosuki.com
フォントワークスの8書体がGoogle Fontsにて無料で利用可能に！ | Web Design Trends
筑紫書体やロダンなどの有名フォントを提供する「フォントワークス」が2021年1月にGoogle Fontsで8つの書体の提供を開始しました。 これにより、Google Fontsで利用できる日本語フォントの種類が増え、無料で利用できる日本語Webフォントの選択肢が広がりました。 8つの日本語フォントがGoogle Fontsに登場 今回フォントワークスより提供開始されたフォントは、下記の8つの書体です。 すべて「SILオープンフォントライセンス」で提供されていて、商用利用可能で、Webフォントはもちろん、ゲームやアプリへの組み込みが認められています。 クレー One Regular / Semibold 手で書いたような優しい印象の楷書体フォントです。ミニマルデザインとの相性が良さそうで、Webフォントとして見かける機会も多くなるのではないでしょうか。レギュラーとセミボールドの2種類が提供
Google Fontsのサービスなど、最近では無料で使えるフォントも増えてきました。 しかし、数もかなり多くどんなフォントを使えばいいのか迷ってしまいますよね。 今回はWebデザインの現場からよく使う定番のフォントをご紹介いたします。 よく使う日本語フォント ゴシック体 まずはベーシックなゴシック体から見ていきましょう。 Webデザインではディスプレイでの可読性からゴシック体の方が多く使用される傾向にあると思います。 ヒラギノ角ゴシック デバイスフォント | 無料 角ゴシック | ヒラギノフォント macOSおよびiOSに標準搭載されているフォントです。 カッチリとした安心感のある読みやすい書体ですね。 Windowsでの使用の場合はダウンロード製品を購入するか、もしくはモリサワのフォントライセンスを購入することで使用可能です。 游ゴシック デバイスフォント | 無料 字游工房｜JIYU
Photo by Bob Newman on Unsplash In this article, I will show you how to: Choose the best way to import your Google Fonts Skip over some of the latency time for downloading fonts Fix flash-of-invisible text (FOIT) Self-host your fonts for faster speed and greater control Anatomy of a Google Fonts request # Let’s take a step back and look at what is happening when you request from Google Fonts using
フォントを軽量化 使うweightを3つに絞ったとはいえ、1ファイル16~17MB。フォントファイルを軽量化(サブセット化)していきましょう サブセットフォントメーカーをダウンロードします。 https://opentype.jp/subsetfontmk.htm Windows用とMac用が別ですので選んでください。 ダウンロード後、インストールし起動するとこのようなソフトが開きます。 ①作成元フォントファイル 参照から選択できます。今回はNotoSansCJKjp-Regular.otfを例にします。 ②作成後フォントファイル 基本的には元のファイルと同じ名前で良いです。場所は混乱しないように別の場所を指定すると良いでしょう。 ③フォントに格納する文字 第1水準漢字、非漢字文字、アスキー文字をコピペします！ 唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍
「Noto Sans Japanese」の不要なものは削除して必要なものだけ読み込む方法【Webフォント高速化】 | HPcode（えいちぴーこーど）
Webフォントとして使える「Noto Sans Japanese」は、無料かついい感じのデザインで使えるので、おそらく多くの方が重宝しているフォントだと思いますが、デメリットが1点。 それは、読み込みが重すぎるということ…。 比較してみましょう。 ※ キャッシュを削除した状態 & 同じネット状況で試しています。 CDNから読み込んだ場合… こんな感じ↓で読み込んだ場合です。 1つのフォントファイル読み込むのに1.49秒。 不要なものを削除して読み込んだ場合… 今回の対応で不要なものを取り除き軽量化して読み込むと、 1つのフォントファイル読み込むのに0.138秒。 10分の1くらいになってますね。 （どれだけ余計なフォントを読み込んでいたか、ということです） このように、日本語のWebフォントでもWebサイトでは使わないような不要なフォントファイルから抜き出してあげることで、軽量化できて読み
The M+ Outline Fonts Project develops a superfamily set of several families: 4 families with proportional Latin, 3 with fixed-halfwidth Latin, and 2 with fixed-
ウェブサイトやウェブアプリケーションで、アイコンを表示させたいときってありますよね？ 例えば、矢印、チェック、コピー、TwitterやFacebook… そんなときに使えるのがFont Awesomeです。 この記事では、Font Awesomeとはなにか、Font Awesomeの使い方、Font Awesomeの加工の仕方について解説していきます。 Font Awesomeとは Font Awesomeとは、商用利用が可能で、自身のウェブサイトやアプリケーション、WordやPDFなどのドキュメントにも埋め込めるWebアイコンフォントです。 Webアイコンフォントとは Webアイコンフォントとは、pngやjpgとは違って、拡大しても粗くなることはなく、色やサイズなどを簡単に変えることができます。 Font Awesomeの5つのタイプ Font Awesomeでは、 Solid Regu
Webフォントは、サーバーにあるフォントデータを読み込むことで、端末の環境に依存せず同じフォントをウェブページに表示する技術です。 2010年頃からCSS 3の登場とともに徐々に浸透し、近年ではさまざまなウェブサイトやサービスで使われるようになりました。 しかし日本語フォントは3〜10MBもの大容量になったり、導入にコストがかかったりと、採用を見送っている方もいるのではないでしょうか。今回は実用的でオススメの日本語Webフォントを、それぞれの特徴を踏まえつつ紹介します。 Noto Sans JP / 源ノ角ゴシック 世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans JP」で、Adobeのブランドは「源ノ角げんのかくゴシック（英名：Source Han Sans）」といいます。 Noto Sans JP
2018年10月13日 WEBデザインやHTMLコーディングをする方にとって、身近になったWEBフォント。中でもGoogle Fonts（グーグルフォント）はとても貴重な存在ですよね？そのGoogle Fontsでついにの日本語フォントが正式サポート開始されました。その中でも日本語の美しい明朝体が使えるとても貴重なフォント「Noto Serif JP」も含まれています！しかし、ほとんどのモダンブラウザでは表示されるのに「Noto Serif JP」はIE11で表示されないというなぞの現象に遭遇します。 そこで今回はGoogle Fonts「Noto Serif JP」をIE11で表示する方法と、その使い方・注意点を解説したいと思います。 Google Fontsの使い方 まずはGoogle Fontsページ（https://fonts.google.com/）にアクセスします。 ページの右
いままでは、早期アクセス版（ベータ版的な）として公開されていたGoogle Fontsの日本語版ですが、ついに正式版が公開されました。 当ブログでも使用していた早期アクセス版の「Noto Sans Japanese」ですが、こちらを使っている人は、今後正式版である「Noto Sans JP」に移行することを検討してもいいかもしれません。 今回は「Noto Sans JP」の導入方法について紹介していきます！ ちなみに早期アクセス版のNoto Sans Japaneseについてはこちらにまとめています。 ご興味があればこちらもどうぞ～
Posted by NAGAYA on Jul 25th, 2019 Webページ上のテキスト表示に使うフォントは、基本的にPCにデフォルトで入っているもの（たとえばWindowsの和文フォントならメイリオや游ゴシック）のみが使われてきました。 デザイン性の高いフォントを使いたい場合は画像化して使っていましたが、最近ではあらゆるデバイスで綺麗に表示させること、検索エンジンの進歩にともないSEOを意識することを求められるようになった影響もあり文字情報はテキストで表現するのがベターとなっています。 これらに関連して活用されているのが Webフォント です。 ページ表示時にWebサーバ上にあるフォントデータも一緒に読み込んでくるので、誰が見ても同じフォントでテキストを表示することができます。 Webフォント利用のための事前知識 Webフォントを使う手段 Webフォントを使う手段は大きく次の2つで
Font Awesome 6は、2022年に正式リリースされたばかりのFont Awesomeの最新バージョンです。 ベータ版では無料プランがありませんでしたが、正式リリースのタイミングで無料プランも公開され、誰でも手軽に利用できるようになりました。 今回は、Font Awesome 6を使ってアイコンフォントを表示する方法をご紹介していきたいと思います。 2022年版：おすすめのWebアイコンフォントサービス10選 Webアイコンフォントを利用することで、数千種類のアイコン素材をWebサイト上で簡単に表示することができます。 Webサイト上で多くの画像ファイルを読み込むとページの表示速度に影響してしまいますが、W... Web Design Trends Font Awesome 6とは？ Font Awesomeは、多くの人に利用されているWebアイコンフォントサービスです。Font
無料で使える日本語webフォント 無料で使える日本語webフォントも増えてきたので、一覧にしてみました。 Googleフォント M PLUS 1p / M PLUS Rounded 1c / さわらび明朝（Sawarabi Mincho） / さわらびゴシック（Sawarabi Gothic） / Noto Sans JP / Noto Sans TC / Noto Sans SC / Noto Serif JP / Noto Serif SC / Noto Serif TC / 小杉フォント（Kosugi） / 小杉丸フォント（Kosugi Maru） / はんなり明朝（Hannari） / こころ明朝（Kokoro） / ニコモジ（Nico Moji） / ニクキュウ（Nikukyu） Google Fonts + 日本語（公式サイト） ※小杉フォントと小杉丸フォントはGoogle F
自分のウェブサイトの見た目を一定させるためにウェブフォントを使いたいということはある筈。 ただ、日本語のフォントはファイルサイズが大きいこともあって転送量や表示に時間がかかるなど困ることも。 以前にウェブフォントのサブセット化をやったことがあるが、それだと転送量の面しか良さがない。 これまでもGoogleが配布しているNoto Sans系のフォントを愛用していたのだが、サブセット版のフォントファイルを自分のウェブサイトに置くものどうかなという考えに変わったので変更することにした。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しい日本語フォントがたくさんリリースされてる！ 2021年、日本語の新作フリーフォントのまとめ
2022年に最適なfont-familyの書き方 - ICS MEDIA
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
Webフォント読み込み戦略（2021年） - MOL
Google Fontsが日本語WEBフォントを正式サポート – Dream Seed
Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応
2021年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ
Webフォントとは 使い方や「読み込みが重い？遅い？」に回答 | インタビュー
タイポグラフィを活用するための12のツール
Webフォントとして日本語も使える！Adobe Fontsの使い方
Time to Say Goodbye to Google Fonts: Cache Performance
これなら簡単！SVG対応、アイコンを組み合わせてWebフォントのセットを作成できる無料ツール -Webfont
Webフォントを使う時はbold時のfont-weightを読み込んだ上で扱う - Qiita
商用利用OK！2019年にリリースされた無料フォント30
ゲーム・アプリに組込めるフォントまとめ｜トリヘッズ
【Noto + YakuHanJP】日本語WEBフォント2018｜株式会社クインテット
【迷ったらコレ！】Webデザインでよく使う定番おすすめフォント 13選（日本語９フォント欧文4フォント） – 東京のホームページ制作 / WEB制作会社 BRISK
Making Google Fonts Faster in 2022
【サイト高速化!】Noto Sansを軽量化してWEBサイトに使う方法 | SEO対策なら株式会社ペコプラ
M PLUS Rounded 1c - Google Fonts
【最新版】Font Awesome 5でアイコンを表示させよう！
商用利用可能！高品質なオススメ日本語Webフォント10選（無料フォント多数） - ICS MEDIA
Google FontsのNoto Serif JPがIE11で表示されない時の解決法
待望の正式版！WebフォントNoto Sans JPの使い方・ダウンロード方法を紹介！
Webフォントをサーバにアップロードして使うには？注意点や実装方法まとめ | 株式会社グランフェアズ
無料で使える！Font Awesome 6 の導入手順まとめ | Web Design Trends
日本語のwebフォントを使いたい時のメモ｜くろひつじのメモ帳
ウェブフォント Noto Sans JPを使う 2019年新春
topics.tbs.co.jp
twitter.com
www.agara.co.jp
developers.google.com
weekly-jitsuwa.jp
satoshi.ss.cms.am