日本語のwebフォントを使いたい時のメモ｜くろひつじのメモ帳
無料で使える日本語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
Web上で好きなフォントを簡単に表示できるTypekitの使い方
Web上でさまざまなフォントを表示することができるWebフォントは、今ではかなり一般的になりつつあり、さまざまなホームページがWebフォントを活用しています。 Webフォントには欧米文字だけでなく、日本語フォントも設定次第で表示することができるので、タイトルなどの画像スライスを作成する必要がなく、デザインの幅が大きく広がります。 Webフォントを選ぶサービスとして最もよく知られているのはGoogle Fontsですが、Google Fontsには日本語フォントが充実しておらず、日本語サイトをデザインするデザイナーにとってはあまり使い勝手がよいとは言えないでしょう。 しかし、PhotoshopやIllustratorなどの開発・販売をしているAdobeでは、Typekitと呼ばれるWebフォントサービスを展開しており、日本語フォントも充実しています。 さらに特筆すべきことは、このTypeki
gulpで複数のスプライト画像やWebフォントを管理する - Qiita
gulpでスプライト画像や Webフォントを生成する 今や CSSスプライト画像や Webフォントを、手動で作成・更新する機会は少なくなりました。タスクランナーがファイルの生成から CSS定義まで自動でやってくれます。 自分は CSSスプライトには gulp.spritesmith、Webフォントには gulp-iconfont を愛用しています。 どちらも以下のように指定のディレクトリに格納されている複数の PNGファイル、SVGファイルを結合して 1つのスプライト画像やWebフォントを生成する仕様になっています。 # スプライト画像元データ ./develop/sprite/heart.png ./develop/sprite/diamond.png ./develop/sprite/spade.png ./develop/sprite/clover.png # スプライト画像生成デー
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
【保存版】Webフォントの使い方と無料のおすすめサイト一覧（日本語・欧文） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか？ 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
