WEBサイトで使えるフォントについてのメモ|標準フォント・WEBフォントなど
2023/1/28
2023/1/28
これまでWEBサービスを開発していて、フォント設定をなんとなくで行ってしまっていました。
そこで今回は改めてフォントについて調べたことを簡単にまとめていきます。
目次
WEBサイトのフォントは大きく分けて「2種類」
WEBサイトで利用するフォントは「標準フォント」と「WEBフォント」の2つがあります。
(他にも「自分でサーバーにアップしたフォントを使用する」などもありますが、主に使うのはこの2つかなと思い今回は絞りました。)
1)標準フォント
MacやWindowsなどの、OSやメーカー毎に標準搭載されているフォントを読み込んで使用する方法です。
簡単に使用することができて、サイトパフォーマンスはWEBフォントよりも比較的よくなります。一方で、種類が限られているのでサイトのデザイン性や独自性などを出すのが難しくなります。
2)WEBフォント
Google Fontsなど、外部のサーバー上にあるフォントを読み込んで使用する方法です。HTMLやCSSなどで使いたいフォントを読み込むことで使用できるようになります。
いろんな種類のフォントがあり、好きなデザインを選んで使用することができます。ただしファイルが大きいためサイトパフォーマンスが落ちてしまうことがあります。
またWEBサイト上で使用できるかどうかのライセンス確認の必要があります。
標準フォントの指定例
標準フォントで「ゴシック体」と「明朝体」のそれぞれを指定する時の、font-family
の記載例をメモしておきます!(もし記載ミスなどありましたら教えて頂きたいです…)
「ゴシック体」の場合
font-family:
"Helvetica", /* 欧文(macOS) */
"Helvetica Neue", /* 欧文(macOS) */
"Hiragino Kaku Gothic ProN", /* 和文(macOS) */
"Hiragino Sans", /* 和文(macOS) */
"Arial", /* 欧文(Windows) */
"Yu Gothic", /* 和文(Windows) */
"Meiryo", /* 和文(Windows) */
"Roboto", /* 欧文(Android) */
"Noto Sans CJK", /* 和文(Android) */
sans-serif; /* 総称: ゴシック */
「明朝体」の場合
font-family:
"Times New Roman", /* 欧文(macOS/Windows) */
"YuMincho", /* 和文(macOS) */
"Hiragino Mincho ProN", /* 和文(macOS) */
"Yu Mincho", /* 和文(Windows) */
"MS PMincho", /* 和文(Windows) */
serif; /* 総称: 明朝体 */
おまけ:Next.js + TailwindCSSのフォント指定方法
(※他の記事で紹介する予定です)
最近の記事
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Supabase + JavaScript】よく使う処理まとめ
最近、JavaScript(Next.js)とSupabaseでWEBサイトを作り始めました!
そこで今回は、JavaScriptでSupabaseを使う際のよく利用する処理をメモとして記載し...
2023/5/24
2023/5/24
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
AI画像生成「Stable Diffusion」をGoogle Colaboratoryで実行する方法メモ
目次1)Stable Diffusion WEB UIのGitHubを開く2)使いたいモデルを選ぶ3)Google Colaboratoryを実行する4)WEB UIのページを開く5)画像生...
2023/5/20
2023/5/20
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js 13】Googleタグマネージャの設定方法。
Next.js 13でGoogle Tag Managerを設定する方法を調べてみました。
とりあえずは動く処理ができたので、その方法をメモしておきます。
目次今回編集するファイルファイ...
2023/5/15
2023/5/15
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
Next.js 13のアプリ作成時に聞かれる質問まとめ
Next.js 13で新しいアプリケーションを作成する際、はじめにいくつかの質問に答えることが求められます。
この記事では、その質問の内容と解説をメモしていきます!また今回内容がわからなかった...
2023/5/6
2023/5/25
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js】DjangoのAPIで記事のタグを更新したい
DjangoのAPIを使って、Next.jsからデータを新規作成や更新する時に、同時に関連データ(ManyToMany)も変更したい。
今回は「記事(Post)」を新規作成/更新して、その記事...
2023/2/15
2023/2/15
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【GAS】複数スプレッドシートを一括CSVダウンロードする
複数のスプレッドシートをCSVファイルにしてダウンロードしたい時に、1シート毎にcsvダウンロードをしていくのが大変だったので、少し楽にできる方法を調べてみました。
今回は、そんな複数スプレッ...
2023/2/13
2023/2/13