Google Web Fonts by Developry

Leírás

Once you install and activate the plugin your editor toolbar will change and you will see there are two new dropdowns with options.

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

Main features

  • You have the ability to select from all available font variations and styles (100 … 900, italic, etc.) so you can use them to style your headings, blockquote, etc.
  • You have the ability to apply fonts to the whole site as well as single page or post element via the editor (works only with the Classic Editor at this moment).
  • Very easy to use, with only few clicks you can customize the font typeface, weight and style of your page/post content.
  • All the fonts are loaded dynamically on post/page basis using the WebFont Loader by Typekit so you can use different fonts on different pages and only the applied fonts will load up on the front-end.

Available fonts and variations

Google Fonts

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 Variations (added in 1.0.1)

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 Styles

Font Weight : Thin, Extra Light, Light, Regular, Medium, Semi Bold, 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.<h3>What to learn more?</h3>

Detail documetation with step by step usage, demos and screenshots can be found at Developry Google Fonts main page.

Képernyőmentések

  • Google Web Fonts by Developry in action. screenshot-1.(gif)
  • Google Web Fonts by Developry editor toolbar. screenshot-2.(png)
  • Avilable Google Fonts typefaces. screenshot-3.(png)
  • Avilable weight and style for your Google Fonts. screenshot-4.(png)
  • Set global font and styles for text and headings. screenshot-5.(png)

Telepítés

The plugin is easy to install just search for developry google web fonts under Plugins > Add New.

  1. Upload the plugin files under /wp-content/plugins/developry-google-fonts, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress
  3. Go to your page/post you want to style. You will see the two new selects with options on your editor toolbar.
  4. Select the content you want to style; select the desired font typeface weight & style and voilà.

GYIK

Does it work with WordPress Gutenberg blocks?

Currently, the plugin doesn’t support blocks, however I have plans to add this functionality in the near future. If you still wish to use the plugin you can either use the Classic Editor or apply only the global fonts under the Developry options page.

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

Just 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?

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 Developry > Google Web Fonts by Developry on your WP admin menu bar and then you will see all the avilable options you have. Note: these global fonts will overwritten if you apply fonts and styles to individual elements via the TinyMCE editor.

Vélemények

2019.12.01.
Currently, the page & post functionality is only available for the Classic Editor (soon we will support blocks as well); you can still apply global fonts via the options page.
2 (az összes) vélemény olvasása

Közreműködők és fejlesztők

“Google Web Fonts by Developry” egy nyílt forráskódú szoftver. A bővítményhez a következő személyek járultak hozzá:

Közreműködők

“Google Web Fonts by Developry” fordítása a saját nyelvünkre.

Érdekeltek vagyunk a fejlesztésben?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Változási napló

1.0.0

  • Initial version of the plugin added to the directory.

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.

1.0.2

  • Now you have the ability to 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.3

  • Some minor fixes and bugs.
  • The plugin is translation ready and all the copy is available for translating in different languages.
  • Prepare the plugin for Gutenberg and blocks support in the next major update.