Advanced Font Plugin – Setup & Usage

Many bloggers use custom fonts to improve the look of their website. But when fonts are added using normal CSS or link tags, they can slow down the site and may cause a "Render Blocking Resource" issue in Google PageSpeed.

To fix this, the Probha template provides an advanced Font Plugin. It uses modern JavaScript to load fonts in the background, so your website speed stays fast and smooth.

Where to find the plugin?

To set it up, follow these detailed steps:

Log in to your Blogger dashboard using your Google account.
From the left sidebar, click on the Layout option. This will open your blog layout panel.
Scroll down to find the Plugins section in the layout area.
Look for the gadget named "Font".
Click the Edit button on that gadget to open its settings panel.
Inside the content box, you will see a JSON code where you can add or edit your fonts.
After making changes, click Save to apply the settings.
Finally, refresh your blog to see the fonts applied to your website.

Configuration Guide

This plugin uses JSON format for configuration. You can easily control font loading and add multiple fonts from one place.

Status

"status": true → Enables the font plugin

"status": false → Disables the font plugin

Font List

In this section, you define your custom fonts.

"fontUrl" → Add the direct link of the font file (recommended: .woff2 for faster loading)

"fontFamily" → Set a name for the font. You will use this name in your CSS or theme settings

How to add multiple fonts?

You can add multiple fonts by inserting more objects inside the fonts array. Each font should be separated by a comma.

Example:

{
  "status": true,
  "fonts": [
    {
      "fontUrl": "https://example.com/fonts/font-1.woff2",
      "fontFamily": "My Font One"
    },
    {
      "fontUrl": "https://example.com/fonts/font-2.woff2",
      "fontFamily": "My Font Two"
    }
  ]
}

After adding multiple fonts, you can use them in your CSS like this:

body {
  font-family: "My Font One", sans-serif;
}

h1, h2 {
  font-family: "My Font Two", sans-serif;
}

Key Benefits

Super Fast Speed: Fonts load in the background without blocking page rendering

Better PageSpeed Score: No render-blocking issues

Easy Control: Manage all fonts from the layout without editing theme files

Conclusion

Custom fonts make your blog more attractive, but they should not reduce performance. With the Probha Font Plugin, you can use multiple fonts easily while keeping your website fast.

If you found this helpful, don’t forget to share it.