これで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オープンフォントライセンス」の元で各書体が無料公... 続きを読む

Webフォントってなに？ 遅くないの？ SEOにはどうなの？ 「フォントおじさん」こと関口さんに聞いた。 | インタビュー | Web担当者Forum

2019/04/04 61 users SEO 書体 ブランディング 関口さん Web担当者Forum

ブランディングや作業効率などの点からWebフォントを使ったWebサイトが増えてきている。一方で、いまだに「Webフォントって遅くない？」「SEOにはどうなのよ？」という疑問も尽きない。そこで、今回は「フォントおじさん」ことソフトバンク・テクノロジーの関口浩之さんにWebフォントについて聞いた。 ※上写真の書体は、... 続きを読む

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

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

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

フォント素人のWebエンジニアが、「フォントおじさん」に聞いてみた！Webフォントの最近の事情とか | HTML5Experts.jp

2017/09/14 71 users Webエンジニア HTML5Experts.jp 事情

こんにちは、編集長の白石です。 この記事は、9月24日に開催される HTML5 Conference 2017 に登壇するエキスパートに、予定しているセッションのトピックを中心に、いろいろ伺ったものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ソフトバンク・テクノロジーの関口浩之さんです。 関口さん... 続きを読む

[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フォントを使う 画像を... 続きを読む

The Typekit Blog | 日本のお客様へ。日本および東アジアのWebフォントへの対応と新しいフォント選択ツールに関するお知らせ。

2015/06/16 68 users 東アジア The Typekit Blog Typekit

日本のお客様へ。日本および東アジアのWebフォントへの対応と新しいフォント選択ツールに関するお知らせ。 4つのチームが、3つの大陸、5つの時間帯に分かれ、その長年の作業を終え、TypekitのWebフォントサービスが拡張され、日本語、中国語、および韓国語用のフォントにも対応しました。 私どもの日本（および東アジア向け）書体ライブラリーを、デスクトップ用フォントとして同期可能にするだけでなく、お客様... 続きを読む

Webフォントで文字化けしたときのよくある原因と対処法 | Webデザインのタネ

2015/03/15 64 users タネ フォントファイル 文字 webデザイン 原因

ずいぶんと久しぶりの投稿です。最近仕事でFont AwesomeやGLYPHICONなどでアイコンなどでWebフォントを使う機会が増えてきました。 ですが、いざ人に確認してもらうと、Webフォントが文字化けして豆腐文字になってしまっていたり、謎の文字が出てきてしまったりと色んなケースで失敗してます。 今日は実際にやってみて文字化けした例を紹介します。 原因1 サーバーにフォントファイルをアップして... 続きを読む

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

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

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

最低限知っておきたい、WEBフォントの基礎知識【参考リンク付き】 | インバウンドサイトのエムハンド

2015/02/03 61 users エムハンド 書体 最低限 タブレット インバウンドサイト

WEBデザイン 2015-02-03 最低限知っておきたい、WEBフォントの基礎知識【参考リンク付き】 いきなりですが、WEBフォントをご存知ですか？言葉はよく聞くし、書体に関することだということくらいはわかる。でも、詳しいことは知らない…。そんな方もいらっしゃるのではないでしょうか？今回は、スマホやタブレットでのホームページ閲覧割合が増えて来たことも相まって、ますます利用が増えて行きそうなWEB... 続きを読む

国内でよく使われてそうな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... 続きを読む

月間10ドルで20,000種類のWebフォント使い放題、fonts.comに課金した - MEMOGRAPHIX

2014/12/24 75 users Axis memographix 欧文フォント フォント

fonts.comのWebfontプランに課金したところ便利だった。 DINもUniversもAXISも使える fonts.comはフォントを売ってるサイトだけど、Webフォントの配信サービスもやってる。月10ドルのスタンダードプランに加入すると、fonts.comで取り扱ってる20,000種類以上のフォントがWebフォントとして使い放題になる。 特筆すべきは、欧文フォントのラインナップの多さで、... 続きを読む

はてなブログで標準的に利用可能なアイコン絵文字フォント一覧 - 太陽がまぶしかったから

2014/11/22 50 users 太陽 はてなブログ ブログカスタマイズ 利用 プログラミング

2014-11-22 はてなブログで標準的に利用可能なアイコン絵文字フォント一覧 プログラミング プログラミング-はてなブログカスタマイズ はてなブログで標準的に利用可能なアイコン絵文字 はてなブログには各種サービスやブログ内のアイコン画像がWebフォントとしてインストールされており、特定のクラスをつけたタグを用いる事で「はてなブログ」の様に文字列として出力可能となっています。はてなブログ専用の絵... 続きを読む

【WordPress】Webフォントありのブログを高速化した、たった1つのこと | せめて、人間らしく

2014/10/29 80 users WordPress 人間 ボトルネック スライダー ブログ

ブログが重い このブログでは、一部ですがWebフォントを使っています。 あとスライダーやカレンダーやら重いものが動いており、 表示スピードがとっても遅く、もたもたしたブログでした。 スピード判定で有名なGT Metrixで検査すると、やっぱり「DD判定」。 有名なプラグインのDB Cache Reloaded、W3Total Cacheも導入していましたが、ボトルネックがあるようで、まったく改善さ... 続きを読む

数多くの無料アイコンから必要なものだけをセットにして、軽量化された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フォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない... 続きを読む