Web アプリケーションを作成するときに、好みのフォントを含めることは、ケーキの上に追加するようなものです。フォントはテキストを強化し、Web サイトをより魅力的にし、より良いユーザー エクスペリエンスを提供します。デザイナーや開発者はフォントによって好き嫌いが異なるため、デフォルトのフォントを使用すると創造性が制限される可能性があります。カスタム フォントを追加すると、開発者はアプリケーションに外部フォントを自由に追加できるようになります。

前提条件

このチュートリアルでは、Tailwind CSS の基本的な知識があることを強くお勧めします。

読者は Tailwind CSS と Tailwind をアプリケーションに統合する方法に精通していると思います。 Tailwind を初めて使用する場合は、公式ドキュメントでインストール方法を確認してください。

カスタムフォントとは何ですか?

カスタム フォントは、デフォルトでは使用できないフォントです。カスタム フォントはシステムに存在しないため、必要なときにすぐに利用できません。これらには、購入したフォント、オンラインで入手したフォント、自分で作成したフォント、または会社で使用する特別なブランドのフォントが含まれます。カスタム フォントの一般的な例は、Google フォントです。

プロジェクトにカスタム フォントを追加する

Tailwind をプロジェクトにインストールすると、tailwind.config という名前のファイルが追加されます。 tailwind.config ファイル内には、カスタム フォント、色、グリッド レイアウト テンプレート、フォント サイズなどを追加します。カスタム フォントを追加するには、extend オブジェクトの間にカスタム プロパティを配置します。 tailwind.config ファイルがどのように見えるかは以下を参照してください:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: { },
    },
  },
  plugins: [],
};

カスタム フォントを追加するには、Google Fonts を使用します。 Google フォント Web サイトにアクセスし、「スタイルの選択」をクリックして、好みのフォントを選択します。このチュートリアルでは、このルービック フォントを使用します。以下の Google フォント Web サイトの図を参照してください。丸で囲まれた数字はガイドとして使用されます。

Google リンクを HTML ファイルに添付するには、次の手順を実行します:

• Google からリンクをコピーします。

• index.html ファイルに移動します。

• head タグを見つけて、その中に Google Fonts からのリンクを貼り付けます。
  

カスタムフォントの使用

index.html ファイル内にルービック フォントを貼り付けると、プロジェクトでルービック フォントが使用できるようになりますが、まだ使用できません。

使用するには:

tailwind.config ファイルに移動します。

extend オブジェクト内に fontFamily を追加します。

フォント ファミリー内で、フォントに名前を付けます。この場合、名前はrubです。任意の名前を付けることができます。括弧を開き、フォント名 (「Rubik」) とバックアップ フォントを追加します。

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
      },
    },
  },
  plugins: [],
};

Tailwind はルービック フォントを認識しますが、使用したことはありません。フォントを使用するファイルまたはコンポーネントに移動し、その class=''/className='' 属性にルービック フォントを追加します。プロジェクトにカスタム フォントを適用するには、Rubik ではなく Rub を使用します。以下の例を参照してください:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default Font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

ローカルにダウンロードしたフォントの使用

ローカルにダウンロードしたフォントを使用するために、ランダムな Web サイトを選択します。お好みの Web サイトを試してみてください。 dafont の Web サイトにアクセスし、検索バーでフォントを検索し、ローカル コンピューターにダウンロードします。丸で囲まれた数字をガイドとして、以下の dafont Web サイトの図を参照してください:

zip ファイルを解凍し (解凍には WinRAR を使用します)、解凍したファイルをコピーして、プロジェクト内のフォルダーに貼り付けます。以下の例を参照してください:

次のステップは、/index.css ファイルに移動し、@font-face を挿入してカスタム フォントをプロジェクトに取り込むことです。フォント ファミリーには ADELIA を使用し、フォントが利用できる場所を指定するには src: を使用します。

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'ADELIA';
    src: url('./fonts/ADELIA.ttf');
}

Rubik フォントを統合するには、tailwind.config ファイルに移動し、次の手順を実行します。

• カスタム ユーティリティ クラス名を追加します。

• ブラケットを開きます

• バックアップ フォントとして「ADELIA」と「筆記体」を挿入します。

これが例です:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
        'adelia': ['ADELIA', 'cursive']
      },
    },
  },
  plugins: [],
};

プロジェクトでフォントを使用できるようになりました:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

結論

カスタム フォントは任意のコンポーネントまたはファイルで使用できます。特定のファイルやコンポーネントに対する制限はありません。プロジェクト全体の複数のコンポーネントまたはファイルで使用できます。また、複数のカスタム フォントを構成ファイルに追加することもできます。この記事がお役に立てば幸いです。他の人が学べるように、「いいね！」、コメント、共有してください。グラシアス。