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=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-7.png&w=3840&q=75)
音楽生成AI「Suno」の使い方まとめ!作詞作曲が簡単にできる?
簡単に曲が作れるAIということでよく聞く「Suno(Chirp)」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-5.png&w=3840&q=75)
【Open AI】APIの料金まとめ|GPT・DALL·E・Whisperなど
Open AIのAPI(一部)の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-1-1.png&w=3840&q=75)
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI(Upload file)で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。(Vercelにデ...
2023/11/21
2023/11/22
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12