Integrating Google Fonts API in WordPress Plugin
Posted on 17th June 2023
WordPress plugin developers often need to use custom fonts in their plugins. In the past, this was accomplished by including the font files in the plugin and enqueuing them in the plugin code. However, this method is no longer recommended as it can lead to performance issues.
The recommended method for using custom fonts in WordPress plugins is to use the Google Fonts API. The Google Fonts API is a free service that allows you to use any of the hundreds of fonts available in the Google Fonts library in your WordPress plugin.
In this article, we will show you how to use the Google Fonts API in your WordPress plugin.
Before You Begin
Before you can use the Google Fonts API in your WordPress plugin, you will need to sign up for a free Google API key.
Getting a Google API Key
To get a Google API key, you will need to visit the Google API Console.
Once you are logged in, you will need to create a new project.
Enter a name for your project and click on the “Create” button.
Once your project is created, you will need to enable the Google Fonts API for your project.
Click on the “Enable APIs and Services” button and search for “Google Fonts API”.
Click on the “Enable” button to enable the Google Fonts API for your project.
Once the API is enabled, you will need to create an API key.
Click on the “Credentials” link in the left-hand menu and then click on the “Create credentials” button.
Select “API key” from the list of options and click on the “Create” button.
Your API key will be displayed. Copy and paste this key into a text file for safekeeping.
Using the Google Fonts API in Your WordPress Plugin
Now that you have a Google API key, you are ready to use the Google Fonts API in your WordPress plugin.
The first thing you need to do is add the following code to your plugin:
set_api_key( ‘YOUR_API_KEY’ );
// Include the font you want to use
$fonts->add_font( ‘Roboto’, ‘400,700’ );
// Enqueue the font
$fonts->enqueue_font( ‘Roboto’ );
?>
In the code above, we first include the Google Fonts API. Next, we initialize the Fonts_Google class.
We then set our API key using the set_api_key() method.
Finally, we add the font we want to use and enqueue it.
Adding Fonts to Your WordPress Plugin
The Google Fonts API allows you to use any of the hundreds of fonts available in the Google Fonts library.
To add a font to your WordPress plugin, you will need to use the add_font() method.
This method takes two arguments. The first argument is the name of the font you want to use. The second argument is the weight or style of the font.
For example, to use the Roboto font, you would use the following code:
$fonts->add_font( ‘Roboto’, ‘400,700’ );
In the code above, we are adding the Roboto font with the weights of 400 and 700.
You can find a full list of the fonts available in the Google Fonts library on their website.
Enqueueing Fonts in Your WordPress Plugin
Once you have added the fonts you want to use to your WordPress plugin, you will need to enqueue them.
You can do this by using the enqueue_font() method.
This method takes the name of the font you want to enqueue as its only argument.
For example, to enqueue the Roboto font, you would use the following code:
$fonts->enqueue_font( ‘Roboto’ );
Adding Custom Styles to Your Fonts
In addition to enqueueing fonts, the Google Fonts API also allows you to add custom styles to your fonts.
You can do this by using the add_style() method.
This method takes three arguments. The first argument is the name of the font you want to style. The second argument is the weight or style of the font. The third argument is an array of CSS properties you want to apply to the font.
For example, to make the Roboto font bold and italic, you would use the following code:
$fonts->add_style( ‘Roboto’, ‘400,700’, array(
‘font-weight’ => ‘bold’,
‘font-style’ => ‘italic’,
) );
In the code above, we are adding a bold and italic style to the Roboto font with the weights of 400 and 700.
Conclusion
In this article, we have shown you how to use the Google Fonts API in your WordPress plugin.
We have also shown you how to add fonts and styles to your fonts.
The Google Fonts API is a powerful tool that can help you improve the look of your WordPress plugin.
Assuming you have a basic knowledge of WordPress development, the following instructions will guide you on how to integrate the Google Fonts API in your WordPress plugin.
1. Create a new file in your plugin’s directory and name it “fonts.php”.
2. In this file, paste the following code:
<?php
/**
* Register Google Fonts
*/
function my_plugin_fonts() {
$font_url = 'https://fonts.googleapis.com/css?family=Roboto:400,300,700';
add_action( 'wp_enqueue_scripts', 'my_plugin_fonts' );
}
/**
* Enqueue Google Fonts
*/
function my_plugin_scripts() {
wp_enqueue_style( 'my-plugin-fonts', $font_url, array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_scripts' );
3. In your plugin's main PHP file, add the following code:
require_once dirname( __FILE__ ) . '/fonts.php';
4. That's it! You have now successfully integrated the Google Fonts API in your WordPress plugin.
5. Linking the Fonts in Your Plugin
Once you have your fonts selected, you need to link to them in your plugin. To do this, you'll need to add a few lines of code to your plugin.
First, you'll need to add a link to the Google Fonts API in the section of your plugin. You can do this by adding the following code to your plugin:
Replace “Roboto” with the name of the font you want to use.
Next, you’ll need to add a bit of CSS to your plugin to make sure the fonts are applied correctly. Add the following code to your plugin:
body {
font-family: ‘Roboto’, sans-serif;
}
Replace “Roboto” with the name of the font you want to use.
That’s all you need to do to add Google Fonts to your plugin!
