Adding custom Adobe fonts in WordPress

Custom fonts help enrich the look and feel of your WordPress site. With Adobe Fonts (formerly Typekit), you can easily integrate unique typography into your design. On ruachost.com, this is done using the Custom Adobe Fonts plugin or by writing custom CSS.

Why Use Adobe Fonts?

• Access thousands of high‑quality fonts.

• Improve branding and design consistency.

• Enhance readability and user experience.

Method 1: Using the Custom Adobe Fonts Plugin (Recommended)

1. Log in to WordPress as an administrator.

2. In the dashboard, go to Plugins → Add New.

3. Search for Custom Adobe Fonts (Typekit).

4. Click Install Now, then Activate.

5. In the dashboard, go to Appearance → Adobe Fonts.

6. Create an Adobe Web Project in your Adobe Fonts account:

   • Visit Adobe Fonts Web Project setup.

   • Add the desired fonts to your project.

   • Copy the Project ID.

7. Paste the Project ID into the plugin settings.

8. Save changes → Fonts will now appear in the font family list of supported themes/plugins (e.g., Astra, Beaver Builder, Elementor).

Method 2: Adding Fonts via Custom CSS

If your theme or builder is not supported by the plugin:

1. Generate the embed code from your Adobe Fonts Web Project.

2. Copy the <link> tag provided by Adobe.

3. Paste it into your theme’s header.php file or enqueue it via functions.php.

   function add_adobe_fonts() {
       wp_enqueue_style( 'adobe-fonts', 'https://use.typekit.net/xxxxxxx.css' );
   }
   add_action( 'wp_enqueue_scripts', 'add_adobe_fonts' );
   

4. Apply the font using CSS:

   body {
       font-family: "Your Adobe Font Name", sans-serif;
   }