あなたのウェブサイトの25豪華なウェブセーフフォント

執筆者:Azreen Azmi
  • オンラインビジネス
  • 最終更新日:Oct 05、2020

Fonts.フォント。 We see them every day.私たちはそれらを毎日見ています。 From print ads to magazines, there's all kind of fonts out in the world.印刷広告から雑誌まで、世界中にあらゆる種類のフォントがあります。

あなたがeコマースストアの所有者であろうと新進のブロガーであろうと、すべてのWebサイトに共通していることのXNUMXつは、コンテンツにテキストを使用することです。

サイトの全体的な美学を作成し、成功を確実にするために、表示されたテキスト(またはタイポグラフィデザイン)にいくつかの考えを置くことは驚くほど重要です。

しかし、もっと重要なのは、それらがWebセーフフォントであることです。

Webセーフフォントとは何ですか?

Webセーフフォントは、通常、プリインストールされ、ほとんどのデバイス(コンピューター、携帯電話、スマートTV、タブレット)で表示できるフォントスタイルです。

ウェブセーフフォントが重要な理由

理想的な世界では、あなたのウェブサイトに必要なフォントを選択する能力が必要です。 現実には、使用できるフォントの種類に制限があります。

ほとんどのコンピュータやWebブラウザには、メーカーが事前にインストールしたフォントセットが付属していますが、そのデザインは(通常は)異なる場合があります。 異なるメーカーすべてが共有する標準的なフォントセットはありませんでした。

使用したフォントがユーザーのコンピュータにインストールされていない場合は、Webサイトが一般的なフォントに戻ってしまうことがあります。

それを避けるために、Webデザイナーは、 Webのコアフォント ほとんどのウェブサイトフォントの標準として1996でリリースされたものだ。 これらのフォントセットは最終的に "ウェブセーフフォント"になりました。なぜなら、コンピュータに関係なく、フォントはあなたのウェブサイトに安全に表示されるからです。

私のウェブサイトにウェブセーフフォントを使用する必要がありますか?

短い答え:絶対に。

あなたのウェブサイトのデザインとビジュアルブランドの一貫性を維持したい場合は、ウェブセーフフォントを使用することで、意図したとおりにウェブサイトを表示することができます。

実際には、今日のほとんどすべてのウェブサイトが、ある形のウェブセーフフォントを使用しています。 ウェブデザイナーは、Times New Romanなどの一般的なフォントが特定のフォントやカスタムフォントでない場合にWebサイトにアクセスしたときに表示されないように、Webセーフフォントの選択を推奨します。

これらのWebセーフフォントを追加する方法は?

これらのフォントをWebページに追加するにはいくつかの方法がありますが、プログラミングに慣れていない、または技術的な経験がほとんどない場合は、そのままのCSSコードをコピーして直接貼り付けることができますあなたのスタイルシートにフォントを使用してください。

それでもわからない場合は、次の簡単な手順に従ってください。

  1. header.phpファイルを読み込みます
  2. フォントソース/標準コードをコピーします(参考文献1を参照)
  3. ヘッダーファイルの先頭にコードを貼り付けます。
  4. style.cssをロードし、フォントコードを入力して、選択したフォントテキストを変更します。 (参考文献2を参照)

参考1

参考2

body {font-family: 'Abel'; font-size:22px;}

あなたのウェブサイトの25ゴージャスなWebセーフフォント

1。 Arial

Webセーフフォント-Arial

リンク/ソース: Fonts.com / CSSフォントスタック

2。 カリブリ

Webセーフフォント-Calibri

リンク/ソース: Fonts.com / CSSフォントスタック 

3。 ヘルベチカ

Webセーフフォント-Helvetica

リンク/ソース: Fonts.com / CSSフォントスタック

4。 Segoe UI

Webセーフフォント-SegoeUI

リンク/ソース: Fonts.com / CSSフォントスタック

5。 Trebuchet MS

Webセーフフォント-トレビュシェット

リンク/ソース: Fonts.com / CSSフォントスタック 

6。 カンブリア

Webセーフフォント-Cambria

リンク/ソース: Fonts.com / CSSフォントスタック 

7。 パラチノ

Webセーフフォント-パラティーノ

リンク/ソース: Fonts.com / CSSフォントスタック

8。 パーペプア

Webセーフフォント-Perpetua

リンク/ソース: Fonts.com / CSSフォントスタック

9。 ジョージア州

Webセーフフォント-ジョージア

リンク/ソース: Fonts.com / CSSフォントスタック 

10。 コンソラス

Webセーフフォント-Consolas

リンク/ソース: Fonts.com / CSSフォントスタック

11。 Courier New

Webセーフフォント-CourierNew

リンク/ソース: Fonts.com / CSSフォントスタック 

12。 タホマ

Webセーフフォント-タホマ

リンク/ソース: Fonts.com / CSSフォントスタック

13。 ヴェルダナ

Webセーフフォント-Verdana

リンク/ソース: Fonts.com / CSSフォントスタック

14。 オプティマ

Webセーフフォント-Optima

リンク/ソース: Fonts.com / CSSフォントスタック

15。 ジルサンズ

Webセーフフォント-GillSans

リンク/ソース: Fonts.com / CSSフォントスタック

16。 センチュリーゴシック

Webセーフフォント-CenturyGothic

リンク/ソース: Fonts.com / CSSフォントスタック 

17。 カンダラ

Webセーフフォント-Candara

リンク/ソース: Fonts.com / CSSフォントスタック

18。 アンデールモノ

Webセーフフォント-AndaleMono

リンク/ソース: Fonts.com / CSSフォントスタック 

19。 ディド

Webセーフフォント-Didot

リンク/ソース: Fonts.com / CSSフォントスタック

20。 銅板ゴシック

Webセーフフォント-カッパープレート

リンク/ソース: Fonts.com / CSSフォントスタック 

21。 ロックウェル

Webセーフフォント-ロックウェル

リンク/ソース: Fonts.com / CSSフォントスタック 

22。 Bodoni

Webセーフフォント-Bodoni

リンク/ソース: Fonts.com / CSSフォントスタック

23。 フランクリンゴシック

Webセーフフォント-フランクリンゴシック

リンク/ソース: Fonts.com / CSSフォントスタック 

24。 影響

Webセーフフォント-影響

リンク/ソース: Fonts.com / CSSフォントスタック 

25。 カリストMT

Webセーフフォント-Calisto

リンク/ソース: Fonts.com / CSSフォントスタック

チェックアウトするフォントツール

オンラインで使用できるさまざまなフォントを確認およびテストするために使用できるツールがオンラインで多数あります あなたのウェブサイト。 フォントの選択に問題がある場合、または使用可能なWebセーフフォントの種類を調べたい場合は、これらのサイトを使用すると便利です。

フォントペア

フォントペア タイポグラフィを使って何かと何かのリソース、プラグイン、電子ブック、ガイド、ビデオ、さらにはインスピレーションを提供しています。 彼らはあなたにGoogleフォントで利用可能な最も一般的なフォントを提供し、お互いに最良の組み合わせのフォントを提供するセクションを持っています。

Wordmark.it

特定のフォントでテキストがどのように表示されるかのクイックプレビューが必要な場合は、 Wordmark.it 一度に複数のフォントにテキストがどのように表示されるかを即座にプレビューできます。 フロントページバーに単語やフレーズを入力してEnterキーを押すと、CandaraやLucida Consoleなどのさまざまなフォントのテキストが表示されます。

WhatTheFont

WhatTheFont あなたがオンラインで見たフォントを特定して識別するツールです。 あなたがしなければならないのは、フォントのイメージをアップロードすることだけです。WhatTheFontはデータベース内でそれを横断検索して最も近い結果を得ます。 まだ正確なフォントを見つけることができない場合は、 ヘルプを求めるフォーラム.

フォントプレイのすべて

あなたが私のような人なら、あなたはウェブ上で多くの時間を過ごし、たくさんのウェブサイトを読んだり訪れたりするでしょう。 そのため、Webサイトでタイポグラフィを使用して、サイトの視覚的なデザインを補完することをお勧めします。

あなたの目に気に入っているWebセーフフォントを使用すると、ユーザーは感謝してより多くのコンテンツを使い返すことができます。 何を求めている? これらのフォントの使用を開始し、 すばらしいウェブサイトを作る あなたのビジネスのために!

Azreen Azmiについて

Azreen Azmiは、コンテンツマーケティングとテクノロジーについて書いている傾向がある作家です。 YouTubeからツイッチまで、彼は最新のコンテンツ制作を続け、あなたのブランドを販売する最良の方法を見つけようとします。

接続します。