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 アイコンを

2018年9月にGoogle Fontsは日本語が正式にサポートされ、既に利用されている人、検討されている人も多いと思います。当ブログでも早期アクセスから使用しています。 日本語の正式サポートに伴い、Google Fontsを使用したさまざまなツールも日本語が利用できるようになりました。 自分のWebサイトやブログに、Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールを紹介します。 参考: Google Fonts + 日本語 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語の使い方 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールはこちら、Fontyです。 登録

IBMと聞くと、ThinkPadを思い浮かべる人も多いと思います。 堅牢な作りは、使用していて安心感・信頼感があり、わたしも長年愛用していました。 そんなIBMから、コーポレートフォントがオープンソースフォントとして公開されました。「IBM Plex」と名付けられたフォントは、カジュアルなHelveticaという位置づけで、さまざまなデザインに合うフォントです。 安心・信頼に加え、洗練された美しさも備えています。 Win/Mac用、Webフォントがダウンロードでき、TrueType, OpenTypeも揃っています。 IBM Type IBM Type -GitHub ライセンスはSIL OPEN FONT LICENSEで、個人でも商用でも無料。Webデザイン、スマホアプリ、ゲーム、動画、紙デザイン、同人誌など、さまざまな媒体で利用できます。 IBM Plexにはサンセリフ、セリフ、モノ

日本語Webフォントのトラブル解決 今回は、日本語webフォントの設置方法で 表示できなかった場合の解決方法について 忘れないうちにまとめておこう思い 4つほどのCSSソースを紹介いたします。 Webフォントの指定方法 世の中の多くの人が使っているwebフォントの設置 における標準の指定方法を念のためにご紹介します。 私はHTML、CSSの知識が無いので、試行錯誤で表示するという 大ざっぱだけど、案外確実な方法を使っているのでご了承下さい よくある代表的なwebフォント記述方法1 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8

WordPress まとめ デザイン フォント まだまだ敷居の高い日本語Webフォントですが、商用でも無料で使える「プロ品質のフォント」を配信しているサービスについてまとめてみました。 ※この記事は過去の記事に加筆修正したものです。 Webフォントが注目されて久しいですが、英語などの1バイトフォントとは比較にならないファイルサイズの重さや、フリーで使えるフォントの少なさなどからまだまだ敷居の高い日本語Webフォント。特に商用利用となると、その性質からますます選択肢が狭くなってしまいます。 月額費用を払って有償の日本語Webフォントサービスを使えばよいという話かもしれませんが、個人事業や小規模事業者さんではなかなかそのランニングコストを捻出するのが難しいのが現実だと思います。そこで、実務で使える品質がありながらも商用利用でも無料で使えるサービスを調べてみましたので、備忘も兼ねてまとめておきま

Web フォントを利用する際、技術として理解するだけでなく、フォントに適用されたライセンスを理解しておくことも大切です。 特に和文フォントにおいては SIL Open Font License (OFL) mplus Font License IPAフォントライセンスv1.0 あたりを適用されるケースが多いようです。また、これらのいずれかのライセンスが適用されていれば Web フォントとして利用することができます。ただし、ライセンスによる指示に従う必要があります。 ##各ライセンスの要点 ###SIL Open Font License (OFL) OFL であることを明示すればほぼ自由に Web フォントに利用できます。ライセンス明示方法は後述。 ###mplus Font License ほぼ自由に Web フォントに利用できます。ライセンス明示方法は後述。 ###IPA フォントライ

諸説あるWEBサイトの文字サイズ指定。 現時点でベストなのかな～と思う指定をまとめてみました！ パソコン用サイト [fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”

Googleフォントで好みのフォントを見つけるのはなかなか大変だけど、これを利用すると簡単に探せる！ -Font Library