これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon

2023/02/20 286 users SVGアイコン 太っ腹ライセンス 改変 min UIデザイン用

WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 Min... 続きを読む

商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon

2022/07/27 473 users SVGアイコン 太っ腹ライセンス 改変 SVG 再配布

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの... 続きを読む

【商用OK】Google Fontsで使えるオススメ日本語フリーフォント31個まとめ - PhotoshopVIP

2021/09/16 303 users ウエイト PhotoshopVIP 日本語フリーフォント

この記事では、Google Fontsで使える日本語フリーフォントをまとめてご紹介します。 Google Fontsには現在、31の日本語書体が提供されており、すべてのウェイトを合わせると、74フォントが商用OK＆完全無料となっています。 フォント選択の幅が広がるWebフォントを利用して、ウェブサイトのデザインをグッと良くしてみま... 続きを読む

Webフォント読み込み戦略（2021年） - MOL

2021/04/21 356 users MOL 戦略

Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フ... 続きを読む

【修正済み】はてな匿名ダイアリーで「増田」が「吉田」と表示される不具合が発生していました - Hatelabo Developer Blog

2021/04/01 120 users 増田 平素 匿名ダイアリー 吉田 文字列

はてな匿名ダイアリー担当の吉田です。平素よりはてな匿名ダイアリーをご利用いただきありがとうございます。 2021年4月1日（木）0:00頃より、はてな匿名ダイアリーで「増田」という文字列が「吉田」と表示される不具合が発生していました。原因は「増田」を「吉田」と表示するWebフォントの配信によるもので、現在は修... 続きを読む

フォントワークス8書体が無料公開！商用利用や埋め込みも可能で「Google Fonts」にも対応 | Game*Spark - 国内・海外ゲーム情報サイト

2021/01/19 179 users Game*Spark フォントワークス GitHub グレー

フォントワークスは、手書き風の楷書系硬筆体「クレー」やディスプレイ書体の「ロックンロール」「レゲエ」「ドットゴシック」など全8書体を、GoogleのWebフォント「Google Fonts」にて配信開始しました。 また、これに伴い、GitHubにて「Google Fonts」と同じく「SILオープンフォントライセンス」の元で各書体が無料公... 続きを読む

Google Fontsが日本語WEBフォントを正式サポート – Dream Seed

2018/09/29 359 users Dream Seed Google Fonts 難点 反面

ユーザーの端末にインストールされていないフォントを表示できるWEBフォント。便利な反面、日本語など文字数が多いフォントではファイルサイズが大きくなり、通信量が増えてしまうのが難点です。 しかし、そんな日本語フォントをGoogleのWEBフォントサービス「Google Fonts」がサポートしました。といっても、以前から早... 続きを読む

[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」 | コリス

2017/07/26 309 users コリス Chromium プロパティ CSS 新しいプロパティ

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium ）。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は... 続きを読む

Googleフォントの使い方: Webフォントの表示の仕組みと最適化 | コリス

2016/11/21 256 users コリス Boy 欠点 I don't 利点

Googleフォントなど、Webフォントのロードはどういう仕組みなのか、どのように対応できるのか、Googleフォントの表示の最適化について紹介します。 当ブログでも日本語のGoogleフォントを導入して、1ヵ月が経ちました。 文字が読みやすくなったという利点は非常に大きいですが、ロードに時間がかかってしまうという欠点もあります。 Web fonts, boy, I don't know キャプチ... 続きを読む

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）

2016/02/13 322 users Edge Firefox Chrome Windows 目次

概要 日本語のWebフォントはブラウザーによってはキレイ（滑らか）に見えないこともあります。、滑らかさを出せるCSS設定を紹介します。 目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1... 続きを読む

【第2弾】少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2016/02/01 826 users 実装 Webクリエイターボックス CSS小技集 コード タタ

はるか6年前に書いた記事「 少しのコードで実装可能な20のCSS小技集 」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像を... 続きを読む

グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ | 編集長ブログ―安田英久 | Web担当者Forum

2015/03/10 742 users 安田英久 グーグル Web担 Web担トップ なか

Web担トップ » 編集記事一覧 » [コラム] Web担のなかの人――編集部ブログ » 編集長ブログ―安田英久 » グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ 編集長ブログ―安田英久 グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ 安田英久（Web担 編集長） 3/10(火) 11:00 ツイート サイト企画／制作／... 続きを読む

国内でよく使われてそうなwebサービスのアイコン３０個をIllustrator用ベクターとwebフォントで作ったので配布します。 | KYOPPI

2015/01/20 317 users ask.fm Evernote Dropbox Facebo

需要があるかはわかりませんが、国内でよく使われてそうなwebサービスのアイコン３０個をIllustrator用ベクター(CS5以上)とwebフォントでつくったので配布します。ほんとwebデザインのウの字も出てない当ブログで脈絡なく唐突に素材配布です。 ダウンロードファイルには以下の３０個のサービスのアイコンが含まれてます。 amazon、ask.fm、dropbox、evernote、facebo... 続きを読む

数多くの無料アイコンから必要なものだけをセットにして、軽量化されたWebフォントやSVGを作成できるサービスのまとめ | コリス

2014/08/28 210 users コリス SVG 軽量化 無料アイコン セット

セットになったアイコンはデザインが統一されており、それはそれで便利ですが、全部のアイコンを使うことはほとんどないと思います。 自分が必要なアイコンだけをセットにし、軽量化されたセットにして、WebフォントやSVGとして利用できるオンラインサービスを紹介します。 用意されたアイコンからセットを作ってもよし、自分のアイコンを加えてセットにすることもできます。 flat icon フォーマット：font... 続きを読む

SNSやWebサービスなどのロゴの色（ブランドカラー）を調べてみた｜Webpark

2014/08/11 106 users Font Awesome アイコン Webpark うち ロゴ

SNSなどのアイコンをWebフォントにするサイトが増えていると思います。Webフォントにするということはアイコンの色はこちらで指定する必要があります。ということでFont Awesome Iconsにあるアイコンの色を調べてみました。 で、調べていくうちに止まらなくなってきたので、Font Awesomeに限らず有名なロゴカラーを調べてみました。 Font Awesome Iconsの使い方等はこ... 続きを読む

自社サービスのロゴをWebフォント化して楽をしようと試みてみる方法 | nanapi TechBlog

2014/05/28 9008 users nanapi TechBlog ロゴ エンジニア 修正 みんな

Webサービスをリリースしたばかりの頃は、毎日修正で日々細かい調整に追われるもの・・・さらに最近はレスポンシブWebデザインでMedia Queriesの分、いちいち修正するのかとか思うと、Sass mixinの使い方が巧いデザイナー、エンジニアが羨ましい・・・みんな、そんな毎日じゃないかなと思います。今回はちょっとでも楽をしてほしくて、本当にちょっとの楽くらいにしかならないですが、Webフォント... 続きを読む

WebフォントのCSS指定2014年度版とこれまでの歩み - WEBCRE8.jp

2014/05/22 146 users メジャーどころ 経緯 実務 WEBCRE8.jp Web制作

比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」に おいて最良だと思われるものを考察していくカテゴリです。 考える まとめる 会う 作る 作る 作る 最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない... 続きを読む

意外と簡単！アイコン風Webフォント使ってみたらブログデザインがグッと洗練されたよ！設定方法を紹介 | love guava!

2014/04/20 101 users love guava グアバ 設定方法 ブログデザイン 紹介

アイコン風Webフォント使ってみました。思った以上に簡単でしたが、ブログデザインがグッと洗練されて上々の仕上がりになりました。読込も軽いのでオススメです。導入方法をご紹介します。こんにちは。グアバです。 Webフォントってご存じですか？ WebフォントはWWW上からフォントを表示する技術である。HTMLにおけるフォントのダウンロードはCSS3.0 fonts moduleにて内包された。 なんかこ... 続きを読む

画像の作り方・使い方でファイルサイズを減らす方法 │ Design Spice

2014/04/16 116 users Design Spice 切り口 CSS ファイルサイズ 前提

画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWe... 続きを読む

WEBフォントで簡単に！STINGER3の細かいところにアイコンを入れてみた

2014/04/12 114 users Stinger3 装飾 アイコン 細かいところ わざわざ画像

WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、サイト全体の印象がグッと良くなりますよ！WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、サイト全体の印象がグッと良くなりますよ！ サイトのちょっとした装飾に使ったりする「アイコン」ですが、わざわざ画像を作成したり、素材を探してきたりするのは結構大変... 続きを読む

[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js | コリス

2014/03/06 341 users コリス カーニング スクリプト jQuery 句読点

ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.K... 続きを読む

あのフォントがWebフォントに？！有名フォントにそっくりなWebフォントを見つけたよ | 株式会社LIG

2014/01/27 147 users フォント 株式会社LIG 有名フォント オープニングトーク

こんにちは、ぺちこです。 何か気のきいたオープニングトークをしようと思いましたが、びっくりするほど何も思いつかなかったので割愛します。 突然ですが、あのフォントをWebフォントとして使いたい。でも、それにはライセンスの壁が・・・。という悩ましい時、ありますよね。 欧文フォントに関しては数も多いので代替のWebフォントを探すかと思いますが、これがまた時間がかかる。探している間に素敵なフォントに出会う... 続きを読む

ちょっと珍しいアイコン素材のまとめ、日本の伝統文化、エコ、キッチン用品、矢印、雪の結晶などレアアイテムたくさん | コリス

2013/12/26 232 users コリス psd 矢印 結晶 PNG

最近リリースされた、ちょっと珍しいアイテムをテーマにデザインされたアイコン（フォントも）素材を紹介します。 まずは、日本の伝統文化・風習を伝える100のアイコンから。 日本の風習を伝える100のアイコン 個人・商用利用無料 .png, .psd が揃っており、Webフォントも一部無料でダウンロードできます。 Ecology Icons エコをテーマにしたアイコン、個人・商用利用無料 .ai, .e... 続きを読む

●●っぽい表現ができる「CSS3」サンプル集 | Find Job ! Startup

2013/10/29 602 users イシジマミキ Startup 見出し デザイナー 流行

こんにちわ！ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。 Webフォントの充実、スマートフォンの流行、そしてCSS3の表現力アップにより、画像を使わなくても凝った表現の見出しが作れるようになりました。 どんなデザインがあるのか。海外のサイトを調べるとたくさん出てきますが日本語だとあまりカッコ良く見えなかったりもします。そこで今回は、日本語書体で使えるCSS3のコードサン... 続きを読む

全310種、美しいソリッドなラインで描かれたかわいいアイコン素材 -Elegant Icon Font | コリス

2013/10/02 339 users コリス TTF ベクタ EOT WOFF

ブログでも企業サイトでもよく見かける310種類のアイテムを美しいエレガントなラインで描いたアイコンフォントを紹介します。 Webフォントとして利用できるので、サイズやカラーなど変更しても美しいまま利用できます。.pngも入ってるので、画像で利用してもOK。 Elegant Icon Font ダウンロードできるアイコンのフォーマットは3種類。 フォント（.ttf, .woff, .eot） ベクタ... 続きを読む