Googleフォントを利用する時、どうしてますか? サイトにアクセスして、フォントを選んで、ダウンロードして、インストールして、、、とけっこう面倒だったりしませんか? 昨日リリースしたばかりの「Fontea」はそれらの手間なく、Photoshop上で簡単にGoogleフォントが利用できる優れものです。 しかも完全無料!
こんにちは、デザイナー兼イラストレーターのもりたです。 最近、うら若い後輩たちが意外とフォントのあれこれについて知らないということに気付きました。なので、フォントのことについて何回かに分けて書いていきたいと思います。 第1回目は、プロになりたてのデザイナーだとうっかり間違えることも多い、「フリーフォント」について。 初歩的な話しかしていないので、もう何年もデザイナーをやってる人にとっては常識なことばかりだと思います。 いろんな人に叱られたり肝を冷やしたりしながら覚えてきたことだと思うので、若手の子が迷ったとき、こんなことも知らないの?と言う前に、ぜひこの記事のURLをそっと渡してあげてください。 もくじ そのフリーフォント、使っても大丈夫? フリーフォントの「フリー」は、無料という意味 フリーでも使えない場合もある! フリーフォントを使うときに気をつけたいこと フリーフォントを探すならこの
ユーザの閲覧環境にかかわらず同じ見た目で表示してくれて、しかも超絶カッコイイとあって、爆発的な勢いでウェブ界を席巻しつつあるGoogleフォント。 今回の記事では、そのGoogleフォントの中でも特におすすめの40フォントを雰囲気・用途別に分類し、紹介していく。 紹介の前に フォント選びの基準とコツ ロゴ用と文章用の区別 Googleフォントは重い? 万能フォント 技術系 ロゴ用 文章用 美容・ファッション系 ロゴ用 文章用 飲食・料理系 ロゴ用 文章用 スポーツ系 ロゴ用 学問系 ロゴ用 文章用 生活系 ロゴ用 文章用 Googleフォントの導入方法解説 Googleフォントにアクセス 使用したいフォントをコレクションに追加する 選んだフォントの詳細情報を指定 WebページにGoogleフォントを導入 CSSファイルにコピペし、Googleフォントを実装! 紹介の前に フォント選びの基準
先輩「このテキスト、デバイスでやってね」 新人「え?デバイスってなんですか?」 こんなやりとり、経験ありませんか? 今回は新人にありがちな、「デバイスフォントとWEBフォントって何?」「WEB上のテキストで使えるフォントってどんな種類があるの?」という疑問にお応えします。 目次 HTMLテキスト・画像テキストとは? HTMLテキストで使えるフォント4分類! 1.パソコンやスマホのOSに元々入っているフォント(=OS標準フォント) 2.ユーザーが個別にパソコンにインストールしたフォント 3.外部のWEBフォントサービスが提供するフォント 4.自分でサーバーにアップしWEBフォント化したフォント 番外:OS標準フォントでいいんだけど結局何を使えばいいの? HTMLテキスト・画像テキストとは? WEB上で表示されるテキストは、大きく「HTMLテキスト」と「画像テキスト」の2つに分けられます。 「
第28回リクリセミナー「Webデザイントレンド in 大阪 2016」参加レポート Publish2016/03/22(火) Update2021/02/11(木) 2016/3/20(日)に十三の大阪研修センターで行われた第28回リクリセミナー「Webデザイントレンド in 大阪 2016」に参加してきましたので、いつものように自分の主観でレポートを書きます。 今回は、メモをきっちり取っていく、できる限りツイートをするということに重点を置いてイベントを楽しむ形で臨みました。 今回のハッシュタグは「#resem28」。いつものようにまとめを作成していますので、当日の雰囲気はこちらでなんとなくわかるかと思います。 #resem28ツイートのまとめ 今回は長くなるので目次付きです。 目次 スマートデバイス 2015→2016 ミニセッション:プロトタイピングツールとWeb制作(仮) Webフォ
M+ FONTSはフリーで使えてほとんどすべての漢字まで使える貴重な日本語対応フォントだ。そのうえ、スタイルもウエイトもいろいろあって、デザインにも使いやすい。またTrueTypeフォントなのでPowerPointなどのOfficeでも気軽に使うことができる。 しかし、その反面、種類が多すぎて、インストールするとフォント一覧にいっぱい表示されるし、ちょっと選びにくいという悩みもある。スタイルが7種類、ウエイト(太さ)が5~7種類あって、なんと全部で43種類ある。ここでは自分の備忘録も兼ねて、「どれをインストールしたらいいの?!」という人の助けになるようにメモしておきたい。 まとめ 結論からいうと下記の4点。 M+ 1系(1がつくもの)とM+ 2系(2がつくもの)は好みで。 M+ C系(1cや2c)は欧文文字に癖がある。中でも2cは特に特徴的なので注意。 迷ったら“1p”の全ウエイト(7種類
With Thanks from 2003 M+ FONTS has moved its development environment to GitHub. No new updates here on OSDN. Old information and font files can be found on the "OSDN" link below, but please also see the new "GitHub" version. M+ FONTS は GitHub に開発環境を移し、ここ OSDN での更新は終了しました。今までの情報とフォントファイルは以下の "OSDN" リンクにありますが、ぜひ新しい "GitHub" 版もお試しください。
フォントは様々な印象を与える、重要な要素です。特に明朝体は、高級感や信頼感があり、可読性にも優れています。個人サイトや商用サイト、同人誌や各種媒体などで利用できる、商用OKの明朝体フリーフォントをまとめてみました! 字形の細かい部分まで確認できるよう、大きめのサンプル画像にしました。フォントを利用の際には、各サイトで必ず利用条件やライセンスをご確認ください。 はれのそら明朝 fontopo | 日本語フォント無料ダウンロード はんなり明朝 フォント無料ダウンロード|Typing Art こころ明朝体 フォント無料ダウンロード|Typing Art ほのか明朝 オールド系フォント「ほのか明朝」無料ダウンロード うつくし明朝体 フォントと素材集のフリーダウンロードのフロップデザイン ふぉんとうは怖い明朝体 フォントな。無料日本語フリーフォント やさしさアンチック フォントな。無料日本語フリーフ
2015年11月11日に作成されたページです。 情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。 全件リストはこちら。 どもです。 Windows10から「游」フォントがデフォルトに追加されたそうですね。 メイリオと游ゴシックの比較をしてくださっているサイト様がありました。 個人の所感としては、小さいフォントは不便そう。標準サイズ以降なら軍配が上がる感じですね。 メイリオには20px代の見栄えが悪いという致命的な弱点もあるので、基本的には游を使いたいなーと思いました。 しかも、游フォントには明朝体もあるんですね。 今までwinの明朝体にはHGS明朝Eを使ってましたが、確実性に自信が持てなかったんですよね。 webでキレイに見える明朝フォントが、基本導入されるというのは嬉しいです。かなり。 というわけで、font-familyも考え直す必要がありそうです。 こ
日本語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
フォント指定が明朝体・・・orz のサイトデザインをいただきまして、 正直、全部画像にしてもいいんですが、 SEO的にそれってどうなの?! っていうか更新の手間がすごいよね。。。 っていうコーダーの主張と 明朝じゃなきゃサイトのイメージくずれるからゴシックは嫌だ っていうデザイナーの主張と。 1.WEBフォントを使う? 英語圏だとWEBフォントとかでさらっと対応できちゃうんですけど。 いかんせんここは日本。。。 メリット ・メンテナンス性 ・SEO ・ユーザビリティ ・レスポンシブに対応しやすい デメリット(日本語フォント) ・日本語フォントはデータが重い、表示にタイムラグがでる ・フォントの種類が少ない&有料 ・サブセット化(データ軽量化)するとメンテナンス性が低下 とまあいろいろあるので、 早く大手を振って使えるようになりたい!! 無料でいい感じのWEBフォントサービスがあれば使うんで
900ライセンスApache License 2.0Noto Sans CJK の配信サービス(余談)Google Fonts : Early Accessでウェブフォントとして配信されている。 Noto Sans Japanese (Japanese) ただフルサイズなので 16MB ぐらいある。さすがに、このサイズは現実的ではない(動作確認には良いかも)。 @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); Noto Sans CJK JP を入手するGoogle Noto Fonts からダウンロードする。 言語ごとにフォントが分けられているので「Noto Sans CJK JP」を選択してダウンロード。 zip 形式で圧縮されているので解凍すると、それぞれの形式のフォントファイルが入
CSS3のfont-smoothingプロパティを使用することで、フォントのアンチエイリアスを調節することができます。 ※Windowsはブラウザに関わらず対応していません Mac版のSafariやOpera、ChromeなどのWebkit系とFirefoxのみ、プレフィックス付きで独自実装しているみたいです。 WebkitとFirefoxで別のプレフィックスをつける必要があり、値も違ってくるので注意が必要です。 アンチエイリアス調節のデモ(効果が見えるのはMacのみ) Webkit用CSS Webkitには-webkit-を付与。 .example{ -webkit-font-smoothing: none; //ぎざぎざ -webkit-font-smoothing: antialiased; //なめらか -webkit-font-smoothing: subpixel-antial
CSS Fonts Module Level 3 日本語訳 このページ は、 W3C により,副題の日付にて 編集者草案 として公開された CSS Font Module Level 3 を日本語に翻訳したものです。 この翻訳の正確性は保証されません。 この仕様の公式な文書は英語版であり、この日本語版は公式のものではありません。 【 と 】で囲まれた部分は 【訳者による注釈】 です。 ( 他のウェブ関連仕様の一覧と共通機能の詳細 ) 更新: 2016-01-19 (公開: 2013-11-25 ) このページの大部分はスクリプトにより生成されています( 古いブラウザなど,一部のブラウザには対応していません: )。 本文ダブルクリックで当該箇所の原文が表示されます(左下隅に各種 表示切替ボタン — CSS や DOM の対応が古いブラウザでは、一部機能しないことがあります)。 CSS フォン
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 @font-face { font-family: "FontAwesome"; src: url('/font/fontawesome-webfont.eot'); /* IE9 Compat Modes */ src: url('/font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/font/fontawesome-webfont.woff') format('woff'), /* Modern Browsers */ url('/font/f
HTML5 Advent Calendarと言いつつ、中身はCSS3なのですが、そのあたりはご了解いただければと思います。 Web Fontとは ご存じの方も多いかもしれませんが、Web Fontとは、「端末側に入っていないフォントをWeb経由で取得して表示できる」仕組みのことです。Qiitaでも、アイコンフォントが使われています。 メリット 文字として使える…凝った文字を出すときに画像化すると、文字でなくなってしまうので再利用に不便ですが、文字ならそのまま読み取れますし、動的に書き換えるのもごくシンプルに済みます。アクセシビリティやSEOの面でも有利です。 ベクター表示…Web Fontには通常アウトラインフォントを使いますので、拡大してもスムーズです。Retinaなど高解像度化が進む環境では、かなり便利です。 表現の自由度・安定性…端末に入っているフォントに依存する形では、見る環境によ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く