Google Fonts APIのソースコードを調べてみました | Web技術Tips | ホームページ制作のDOE【横浜】
早期アクセスの頃と比べたらフォントの読み込みスピードは改善されたとは言え、まだまだページ表示速度のボトルネックとなることが多い Google フォントですが、このスタイルシートの中身を調べてどのようにフォントの読み込みがされているのかを知って、可能であればページ表示速度改善のヒントにしたいです。 Google フォントを使う方法はいくつかありますが、最もメジャーなのは<head>内に以下のコードを追加する方法です。 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+San
Monaspace
Since the earliest days of the teletype machine, code has been set in monospaced type — letters, on a grid. Monaspace is a new type system that advances the state of the art for the display of code on screen. Every advancement in the technology of computing has been accompanied by advancements to the display and editing of code. CRTs made screen editors possible. The advent of graphical user inter
Figmaのヒラギノ系のfont-weightが狂っている!? - Qiita
対象読者 Figmaを使うデザイナー Figmaを見ながらスタイルのコーディングをするエンジニア なぜこの記事を書いたのか 弊社ではデザインシステムを構築しています。 テキストもコンポーネント化しているのですが、ある日エンジニアから上がってきたPull Requestを見ると font-weight: 700; となっていたのです。 デザイナーとしては、太文字は font-wight: 600; になる用にコンポーネントを作っていたので、なぜ700と指定されてしまったのか不思議でした。 原因を調査した結果、他でも嵌る可能性があるかもしれないと思ったので、今回記事に残そうと思いました。 すべての答えはFigmaにある 弊社で使っているFigmaの文字設定は下記のようにしています font-familly Figmaでのfont-weight ブラウザでのfont-weightとして出力したい
iOSアプリのシステムフォントにおける日本語のフォントサイズとのギャップを減らす工夫 | Spinners Inc.
これを回避するために、iOSの実装側でHiragino Sansを使うという方法もありますが、その場合にも注意が必要です。Hiragino Sansを使った場合にAutoLayoutでのテキストオブジェクトの高さが、グリフを表示するための見た目の高さより小さく計算されてしまい、アルファベットのyやgなどの下に飛び出しているグリフが切れて表示されてしまうことがあります。 これはおそらくiOSに組み込まれているHiragino Sansのフォント側の問題だと思われますが、かなり前からこの問題は報告されており、修正されることはあまり期待できないでしょう。 日本語文字サイズ問題をFigma Pluginで対応する今回の問題はiOSのシステムフォントが日本語グリフの表示の場合に、特殊な文字調整を入れていることから発生しているというのが上の説明です。 つまりFigma上でシステムフォントと同じ状況が再
フォント組み合わせ10の基本ルール
タイポグラフィーは、ブランドやサビースのブランディング、マーケティングのプロセスにおいて重要な役割を果たしてきました。ブランドのアイデンティティーを表現することができるようなグラフィックの設計がタイポグラフィーの主な役割です。 グラフィックスの大部分を構成しているのはフォントです。一種類のフォントのみで構成されたWebサイトやブログは単調で面白みのないものになってしまします。二種類、多くても三種類のフォントを組み合わせるのが確実に好評を得ることができるアイデンティティーの形成に良いでしょう。 雰囲気の全く異なるフォントを組み合わせ、デザインの価値を損ねているのをよく見かけます。以下、フォントを組み合わせる際に気をつけるべきポイントについてまとめました。 フォントの組み合わせは視覚に訴えるもので、メッセージ性があるものでなければなりません。もしそうでなければ、ページは見劣りしてしまいます。
現役デザイナーが実践している、フォント組み合わせ10個の黄金ルール
海外デザインブログCanva Design School Blogで公開された「10 Golden Rules You Should Live by When Combining Fonts: Tips from a Designer」の著者より許可をもらい、要点をまとめて日本語抄訳しています。 デザインやアートの世界には、変えることができないいくつかのルールがあります。基本ルールを知ることで、自由にルールを壊すこともできるようになります。では、フォントの効果的な組み合わせ方はどのように学べよいでしょう。デザインとしてうまく利用できると証明されている、いくつかのガイドラインを見ていきながら、実践的なデザインの基本を学んでいきましょう。 詳細は以下から。 01. デザインに合ったフォントを選ぼう 多くのフォントはカジュアルさや、陽気さ、真面目さ、エレガントさなど、他とは異なる雰囲気（英: M
CSSでヒラギノ角ゴシックのウェイトを指定する方法 - Ryusei’s Notes (a.k.a. M59のブログ)
※追記あります Mac OS X El Capitanのヒラギノ角ゴシック — Medium ヒラギノ角ゴシックは10ウェイトあるが、CSSでは9つ（100から900まで100間隔）でしか指定できない。しかも、具体的にどのウェイトで表示されるかが、ブラウザによって異なっているようだ。 font-weightと実際に使われるウェイトの対応の表: CSS font-weight Firefox Chrome 100 W0 W0 200 W2 W1 300 W3 W3 400 W4 W4 500 W5 W5 600 W6 W6 700 W7 W7 800 W8 W8 900 W9 W9 また、normalとboldはそれぞれ400と700を指定するのと同じなのだが、今までのヒラギノ角ゴではW3とW6を使ってきたのだから、これでは少し太いかもしれない。こういう時は、@font-faceを使って、ウ
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf
全標準フォント一覧 / フォントシミュレーター - Dekasu.net
WinXP Win7 Win8.1 Win10 MacOSX macOS Catalina / MSOffice AdobeCS6 AdobeFont(日) AdobeFont(英) 一太郎 DynaFont / 選択済 現在のフォーム状態のURL URL : 各グループのフォントの一覧 選択中のフォント WinXP Arial, Arial Black, Arial Bold, Arial Bold Italic, Arial Italic, Batang, BatangChe, Gungsuh, GungsuhChe, Comic Sans MS, Comic Sans MS Bold, Courier, Courier New, Courier New Bold, Courier New Bold Italic, Courier New Italic, Estrangelo Edes
Webデザインに使えるフォントって何ですか？という質問にお答えします！ | 株式会社アルタのごった煮ブログ
フォントを愛するマークアップエンジニアのアシュリーです！ 今回は非Web系の方から「Webデザインに使えるフォントって何ですか？」と聞かれたときに、アシュリーならこう答える！のまとめです。 おおざっぱに言うと、下記のとおりですが… Macでデザインする場合は「ヒラギノ角ゴ」か「游ゴシック体」、「ヒラギノ明朝」か「游明朝体」Windowsでデザインする場合は「游ゴシック体」か「メイリオ」、「游明朝体」デザイン内でのフォントの太さバリエーションは「太い」「通常」の2パターンもっと詳しくご紹介していきますよ♪ ※この記事は「デザインフォントを愛しているが、必要ないときは和文書体の本文はシステムフォントで実装したい派」が書いています！ Webブラウザで表示されるフォントは、OSや機器（ときにブラウザ）によって違うそもそも、なぜ「Webサイトに使っていいフォントって何ですか？」という話になるかという
CSSの@font-faceでGoogle FontsのWebフォントを利用する方法 | Free Style
WebデザインでWebフォントを利用してデザインを構築していくことがよくあります。 そこで使えるのがCSSの@font-face規則です。 @font-face規則はWebフォントを利用するために用意された規則です。Webフォントで有名なのがGoogle Fontsではないでしょうか。 他にもたくさん提供されているフォントや自作のフォントなどのデータを、CSSで読み込んで利用することができます。 Webサイトのデザインでこだわりのあるフォントを利用すると、PhotoshopやIllustrator等で作成したデザインカンプから、Webで表現できない場合があるので、こだわりのあるフォントの部分だけ画像で書き出すしかありません。 もちろん画像として扱っていくのは問題ないのですが、レスポンシブWebデザインに対応しようとすると、画像よりもできるだけHTMLのマークアップとCSSで表現したいところ
【Webデザイナー必見】GoogleFontを使用した高品質サイトまとめ｜エムハンド｜Web制作会社
Google Fontsとは、Googleが提供するWebフォントのサービスです。無料で利用でき、様々な言語のフォントにも対応している点が大きな特徴です。Google Fontを使用している高品質のサイトをフォントのタイプ別にまとめました。フォントを選ぶ際の参考に是非してみてください！ ・・・ 01. 欧文フォント（サンセリフ体）①LATO株式会社Koloha｜https://koloha.co.jp/■使用サイト 株式会社Koloha｜https://koloha.co.jp/ アクシスコンサルティング株式会社｜https://axc-g.co.jp/ TRUE TOWEL｜https://true-towel.com/
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
Googleフォントを使うと犯罪になる - Qiita
<link href="https://fonts.googleapis.com">って書くと罰金取られます。 以下はGerman Court Rules Websites Embedding Google Fonts Violates GDPRというニュースの紹介です。 German Court Rules Websites Embedding Google Fonts Violates GDPR ドイツのミュンヘン地方裁判所は、あるWebサイトの運営者が、ユーザの個人情報を本人の同意なしにフォントライブラリを経由してGoogleに提供したとして、100ユーロの賠償を命じました。 Webサイトが原告のIPアドレスをGoogleに無断で提供したことは、ユーザのプライバシー権の侵害に当たると判断しました。 さらに、Webサイトの運営者は収集した情報をその他のデータと突き合わせることで『IPア
日本語WebフォントにNoto Sans CJK JPを指定する時に気を付けたこと
ライセンス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 形式で圧縮されているので解凍すると、それぞれの形式のフォントファイルが入ってい
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - nuxt/fonts: Plug-and-play web font optimization and configuration for Nuxt apps.
iOS 日本語システムフォント サイズ計算 | Figma
https://twitter.com/mhand_PR/status/1524683928149557248
https://twitter.com/pulpxstyle/status/1512039159489507331
