Download

Web Fonts Loader

Door Krasen Slavov

Beschrijving

Load the 20 most popular Google Fonts within your WordPress.

Apply them to the whole site or individually to each page or post content.

Usage

Once you install and activate the plugin, your editor toolbar will change, and you will see there are two new dropdowns with all available font options (see screenshots below).

The first one is for the font typeface, and the second is for font-weight and style.

Additionally, you can go to the Appearance > Fonts admin sub-menu and apply any available fonts to your whole site’s headings and body text.

Features

  • You can select from all available font variations and styles (100 … 900, italic, etc.), and you can use them to style your headings, blockquote, etc.
  • You can apply fonts to the whole site and a single page or post element via the editor (works only with the Classic Editor now).
  • Very easy to use, with only a few clicks, you can customize the font typeface, weight, and style of your page/post content.
  • All the fonts are loaded dynamically on a post/page basis using the Web Fonts Loader by Typekit so you can use different fonts on different pages, and only the applied fonts will load up on the front-end.
  • Lightweight loading the fonts on the front end won’t affect your page loading speed.

Font Family: Roboto, Open Sans, Lato, Montserrat, Oswald, Source Sans Pro, Slabo 27px, Ralewat, PT Sans, Merriweather, Ubuntu, Nato Sans, Poppins, Playfair Display, Lora, PT Serif, Titillium Web, Arimo, Muli, Fira Sans

Font Variation: Roboto Condensed, Roboto Slab, Roboto Mono, Open Sans Condensed, Montserrat Alternates, Montserrat Subrayada, Source Serif Pr, Source Code Pro, Slabo 13px, Raleway Dots, PT Sans Caption, PT Sans Narrow, PT Serif Caption, Merriweather Sans, Ubuntu Condensed, Ubuntu Mono, Noto Serif, Playfair Display SC, Fira Sans Condensed, Fira Sans Extra Condensed, Fira Mono

Font Weight: Thin, Extra Light, Light, Regular, Medium, SemiBold, Bold, Extra Bold & Black

Font Style: Thin Italic, Extra Light Italic, Light Italic, Regular Italic, Medium Italic, Semi Bold Italic, Bold Italic, Extra Bold Italic & Black Italic

Detailed Documentaion

Additional information with step-by-step setup, usage, demos, and more video & media help can be found on the Web Fonts Loader website.

Web Fonts Loader Pro

As of yet, this plugin doesn’t have a commercial version available.

Schermafdrukken

  • screenshot-2.(png)
  • screenshot-3.(png)
  • screenshot-4.(png)
  • screenshot-5.(png)

Installatie

The plugin installation process is standard and easy to follow. Please let us know if you have any difficulties with the installation.

Installation From Within WordPress

  1. Visit Plugins > Add New.
  2. Search for Web Fonts Loader.
  3. Install and activate the Web Fonts Loader plugin.
  4. You will be either redirected to the main plugin page or need to click on the plugin settings link.

Manual Installation

  1. Upload the entire web-fonts-loader folder to the /wp-content/plugins/ directory.
  2. Visit Plugins.
  3. Activate the Web Fonts Loader plugin.
  4. You will be either redirected to the main plugin page or need to click on the plugin settings link.

After Activation

  1. Click on the Settings link or go to Appearance > Fonts
  2. Select global fonts, save, and preview the changes on the front end.
  3. Go to individual post/page, select any text and choose font typeface and style from the two new dropdowns in the Classis Editor.

FAQ

Use the Support tab on this page to post your requests and questions.

All tickets are usually addressed within 24 hours.

If your request is an add-on feature, we will add it to the plugin wish list and consider implementing it in the next major version.

Does it work with WordPress Gutenberg blocks?

Currently, the plugin doesn’t support blocks. However, we have plans to add this functionality soon.

If you still wish to use the plugin, you can use the Classic Editor or apply only the global fonts under the plugin options page.

How do I apply a font to all the contents for a specific page or post?

Select your desired font typeface with style without selecting anything inside the editor.

How do I apply font only to a leading paragraph or a heading?

Just double click on the element text (this will select the full text for that element) and then apply your font typeface or weight & style.

How do I see what typeface or style is applied to an element?

A single click on any element, and if there is an applied Google font or style, you will see the Toolbar sections change.

How can I apply font or style to the whole site?

Go to the Appearance > Web Fonts in your WordPress admin menu bar, and then you will see all the available options you have.

Note: these global fonts will be overwritten if you apply fonts and styles to individual elements via the Classic Editor editor.

Beoordelingen

Too Bad No Font Samples Shown in Plugin

29 april 2023
There may be a lot of developers out there who know by heart what the fonts look like, but ordinary bloggers don't. It's therefore a shame that the FONT LIST in the plugin, on the page in your dashboard where you are supposed to implement it, does not show the actual font with the font name. Also said that there is no indication of how to use this plugin to control the SITE title and TAGLINE. Very time consuming to try to use this if you don't already know what the fonts look like.

2 mins and problem fixed

8 november 2022
For some reason GP theme was not loading the right fonts; this fixed it in 2 mins with no performance hit, ...might have made it faster actually.

The best to ensure constant Google font application

2 mei 2022
This plugin is just awesome! I been looking for a proper method to override some plugin setting on the native google font inside my theme, but could not find out! I also tried to implement some specific php codes but no results. And I discovered this great little plugin that do the job perfectly. It also allows you to adjust the font size as wishes. Either on the whole website or on a specific piece of content. Leaving a 5 stars review is just a minimum to do, as you can solve this kind of issue for free! Great work, thanks guys 🙂
Lees alle 6 beoordelingen

Bijdragers & ontwikkelaars

“Web Fonts Loader” is open source software. De volgende personen hebben bijgedragen aan deze plugin.

Bijdragers

Vertaal “Web Fonts Loader” naar jouw taal.

Interesse in ontwikkeling?

Bekijk de code, haal de SVN repository op, of abonneer je op het ontwikkellog via RSS.

Changelog

1.1

  • Updated and tested to work with WordPress 6.0

1.1

  • Total revision of the plugin with improved code and UI.

1.0.2

  • Some minor fixes and bugs.
  • The plugin is translation-ready, and all the copy is available for translating in different languages.

1.0.1

  • Added 20 more variations for the most popular fonts, and now there are 40 fonts in total.
  • Newly added fonts: Roboto Condensed, Roboto Slab, Roboto Mono, Open Sans Condensed, Montserrat Alternates, Montserrat Subrayada, Source Serif Pr, Source Code Pro, Slabo 13px, Raleway Dots, PT Sans Caption, PT Sans Narrow, PT Serif Caption, Merriweather Sans, Ubuntu Condensed, Ubuntu Mono, Noto Serif, Playfair Display SC, Fira Sans Condensed, Fira Sans Extra Condensed, Fira Mono
  • Optimized the TinyMCE plugin code for the admin area editor.
  • Now, you can change and add your font typeface and styles to the whole website. There are options to apply fonts to the body text as well as all the headings [h1-h6]
    (including some classes from Bootstrap 4 if you have it loaded with your site setup).
  • Fixed some issues when you apply fonts via the TinyMCE editor.

1.0

  • Initial release and first commit into the WordPress.org SVN.

Meta

Waarderingen

Bekijk alle
Log in om een beoordeling te versturen.

Bijdragers

Ondersteuning

Opgeloste problemen in de laatste twee maanden:

0 van de 1

Het supportforum bekijken

Doneren

Wil je de groei van deze plugin ondersteunen?

Doneer aan deze plugin