Google Fonts + Japanese • Google Fonts + 日本語
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
モリサワとさくらインターネットが協業し、無料でのWebフォント導入を実現 | さくらインターネット
モリサワとさくらインターネットが協業し、無料でのWebフォント導入を実現 〜WordPressで簡単に利用でき、SEOやユニバーサルデザインへの配慮を支援〜 デジタルフォントや組版用ソフトウェアの開発を行う株式会社モリサワ（本社：大阪市浪速区、代表取締役社長：森澤 彰彦）と、自社運営のデータセンターでインターネットインフラサービスを提供するさくらインターネット株式会社（本社：大阪市中央区、代表取締役社長：田中 邦裕）が協業し、「さくらのレンタルサーバ」利用者に向け、モリサワのWebフォント提供を開始いたします。また、Web制作者を対象としたイベントを7月27日（水）に開催いたします。 モリサワとさくらインターネットのコラボレーションにより、「さくらのレンタルサーバ」にてWordPressをご利用いただく際、モリサワのWebフォントサービス「TypeSquare」で提供中の書体の中から、30
Yaku Han JP - 約物半角専用のフォント
ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist
デバイスフォント・WEBフォント大解剖 〜新人デザイナーのテキストフォント選び〜 | WebNAUT by Beeworks
先輩「このテキスト、デバイスでやってね」 新人「え？デバイスってなんですか？」 こんなやりとり、経験ありませんか？ 今回は新人にありがちな、「デバイスフォントとWEBフォントって何？」「WEB上のテキストで使えるフォントってどんな種類があるの？」という疑問にお応えします。 目次 HTMLテキスト・画像テキストとは？ HTMLテキストで使えるフォント４分類！ 1.パソコンやスマホのOSに元々入っているフォント（＝OS標準フォント） 2.ユーザーが個別にパソコンにインストールしたフォント 3.外部のWEBフォントサービスが提供するフォント 4.自分でサーバーにアップしWEBフォント化したフォント 番外：OS標準フォントでいいんだけど結局何を使えばいいの？ HTMLテキスト・画像テキストとは？ WEB上で表示されるテキストは、大きく「HTMLテキスト」と「画像テキスト」の２つに分けられます。 「
超厳選！Googleフォントおすすめ40選を用途別に紹介【導入方法解説付き】 - F Lab.
ユーザの閲覧環境にかかわらず同じ見た目で表示してくれて、しかも超絶カッコイイとあって、爆発的な勢いでウェブ界を席巻しつつあるGoogleフォント。 今回の記事では、そのGoogleフォントの中でも特におすすめの40フォントを雰囲気・用途別に分類し、紹介していく。 紹介の前に フォント選びの基準とコツ ロゴ用と文章用の区別 Googleフォントは重い？ 万能フォント 技術系 ロゴ用 文章用 美容・ファッション系 ロゴ用 文章用 飲食・料理系 ロゴ用 文章用 スポーツ系 ロゴ用 学問系 ロゴ用 文章用 生活系 ロゴ用 文章用 Googleフォントの導入方法解説 Googleフォントにアクセス 使用したいフォントをコレクションに追加する 選んだフォントの詳細情報を指定 WebページにGoogleフォントを導入 CSSファイルにコピペし、Googleフォントを実装！ 紹介の前に フォント選びの基準
Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io
Intro このサイトのフォントに Web Font を適用することにした。 フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。 また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。 フォントサイズの最適化 Noto font は、そもそも豆腐(フォントがなかった場合に代替表示される四角)が出ないように(No-豆腐)することをコンセプトにしているため、フォントの網羅率は非常に高い。 そのため Web Font として利用する場合は、全体だとサイズが大きすぎるため、言語毎に提供されるフォントセットの中から、必要なフォントのみを適用することになる。 本サイトでは、 ASCII 、記号、日本語のフォントを用いる。 しかし、特に網羅された漢字の中には、日常では使わない文字が多々ある。 加えて
Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし
グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ | 初代編集長ブログ―安田英久 | Web担当者Forum
今日は、Webフォントの話題を。日本語Webフォントは、「使いたい、でも重くなるからちょっと」という人が多いと思います。でも、グーグルがクラウド上でWebフォントを提供し始めたことで……。 グーグルが日本語のWebフォントをクラウドで提供開始グーグルが日本語のWebフォントを提供し始めていました。実は、2014年7月からあったらしいのですが、私はつい最近になって知りました。 その名も、「Noto Sans Japanese」。このページの表示も、「Noto Sans Japanese」にしてあります。 Noto Sans Japaneseは、6934文字に削減したサブセット版が提供されており、ウェイト（太さ）が7バリエーション。1ウェイトあたり約4.5Mバイトほどのサイズです。 使い方を簡単に説明すると、CSSで定義ファイルを読み込み、 <style> @import url(http:/
日本語WEBフォントを使って成功しているサイトまとめ〜webフォントサイト見本帳
集英社オレンジ文庫 集英社の新しい文庫シリーズで、全体的にはフレッシュで手軽な 雰囲気が特徴だと思います。webフォントとしてうつくし明朝体が 使われていて、レトロなミステリーが多いシリーズにマッチしています。 古典的な明朝体では無い、ちょっとライトな雰囲気が面白いと思います。 あえて小さいポイントの本文ではwebフォントを避けることで うまく読みやすさとデザイン性のバランスを保っていると思います。 あとメニュー縦書きなのがフロップデザイン的にポイント高いです。 https://orangebunko.shueisha.co.jp/ USIO Design Project 石垣島の魅力を再発見するプロジェクトのサイト。 綺麗な写真と、やさしい雰囲気のイラストが webフォントフロップデザインフォントにマッチして 手作り感とデザインセンスの両立に成功しています。 サイトの人気と石垣島の魅力を
コラム｜株式会社プロネクサスのweb制作部門レインボー・ジャパン
コーポレートサイトとは、企業の概要や事業、取り組み、考えなどを、サイトに訪問いただいたユーザーにしっかりと伝えるための企業のWebサイトです。ますます重要視されるコーポレートサイトにおいて、制作する前に明確化しておくべきことや求められる情報について解説していきます。
WebFonts として利用できるフリーの和文フォント | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Webクリエイターボックスを（プチ）リニューアルしました
2014年8月19日 お知らせ 約2年半ぶりにWebクリエイターボックスのテーマをリニューアル！という事で、変更点をザックリと紹介します。とは言え全体のデザイン自体はあまり変わっておらず、細かいところや内部の修正・更新がメインとなっています。ちなみにブラウザーはChrome, Safari, Firefoxの最新版、IE11対応。Webクリエイターボックスに訪問するユーザーで、IE10以下を利用の割合は1.5%をきっていたのでバッサリ捨ててます。古いブラウザーを利用の方はアップデートしましょう ;) ↑私が10年以上利用している会計ソフト！ SVG画像 背景やアイコンなどで使うデザインパーツの画像をSVGに変更しました。レティナディスプレイのMacに変えてからというもの、どうも画像のギザギザが目についてしまって。リデザイン前のテーマでも一部SVGを使っていましたが、今回総入れ替えしました。
フリーフォントKendoScore:Geekなぺーじ
数値文字参照は、英語入力のみのシステムで日本語表記スコアを表示するときなどに便利です。 KendoScore.ttfのライセンス KendoScore.ttfは、IPA Minchoをベースに作成されており、IPAフォントの派生プログラムです。そのため、KendoScore.ttfのライセンスはIPAフォントライセンスv1.0に準じます。 http://ipafont.ipa.go.jp/ipa_font_license_v1.html Webフォントとして利用する方法 CSS3で新たに追加された@font-faceを利用することにより、Webサーバに保存されたフォントをユーザのWebブラウザに表示させることができます。これにより、ユーザのパソコンなどにインストールされていない文字を表示させられます。 KendoScoreをWebサーバに設置したうえでCSS3の@font-faceを利用す
アイコン型WebフォントをCSSでデザインしたボタン10個
アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 ということで、まずこちらを読み込みます。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> これで準備はオッケーですので１つずつ解説します。 1. アイコンのみ 無駄な装飾はせず、普通にアイコンを並べるだけです。こういうのも意外と多いですね。 <div id="social-icon"> <a href="#"><i class="fa fa-facebook fa-2x"></i></a> <a href="#"><i class="fa fa-twitter fa-2x"></i
クレジットカードや決済システムなど、ショッピングサイト用のWebフォント素材 -Payment Webfont
クレジットカードや決済システムのアイコン素材はよく見かけますが、ベクターで手軽に扱えるちょっと珍しいWebフォント素材を紹介します。 Mastercard, VISAをはじめ、Amazon, Google Wallet, Paypalも揃ってます。あと、JCBもあるのは嬉しいですね。 アイコンは全部で36種類、Mastercard, VISA, Amex, JCBなどのクレジットカードをはじめ、Amazon, Google Wallet, Paypalなどのウェブ決済も揃っています。 Mastercard Maestro Visa Visa Electron American Express Postepay Cartasì Diners Club Discover Union Pay Electronic Cash TrustE Amazon JCB Google Wallet Stri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
簡単にWebフォントが無料で使えるAdobe Edge Web Fontsの使い方[[MORE]] 無料で使える上にフォントをダウンロードしてサブセット化までしなくて良いので簡単にサイトにWebフォントを使う事ができます。 Adobe Edge Web Fontsの使い方がよくわかってなかったので、 今更感はありますが、自サイトを作る上で使ってみる事にしました。 使い方は以下の通りです。 •...
Webページの表現を広げてくれる日本語のWebフォント10選 | UX MILK
メディアのロゴに特化したウェブフォント『Font Famous』 | 100SHIKI
利用されているWebフォント名と、そのフォントの表示テストを行えるブックマークレット・「Type Sample」
ロゴまでWebフォント化! とうとうテンプレートの画像を全部なくしたった