Simplified Font Manager – Typekit and Google Fonts

Descriere

Don’t just limit your google or typekit (Adobe Fonts) customization to body and heading elements. Apply web fonts to any element of your website using CSS selectors. If you know CSS selectors, this plugin offers you the simplest and most efficient method to use google or adobe (typekit) fonts for your website.

What this plugin offers

  • This plugin allows you to customize typography of any front-end element on your site.
  • Apply google font to any element using css selectors (Content added by any theme or any plugin).
  • Apply Adobe font (typekit) to any element using css selectors (Content added by any theme or any plugin).
  • Create unlimited typography control in real time with just click of a button.
  • Fast loading by efficiently enqueueing fonts using optimized http requests.
  • Live preview of font changes on your website in realtime using the WordPress Customizer.
  • Intutive UI makes it very simple to use google or typekit fonts.

Get Started

  1. After activating the plugin, visit Appearance > Customize in admin dashboard.
  2. Click on ‘Font Manager’ tab (probably at the bottom of all tabs).
  3. Click on „Create Font Control” button to create new control.
  4. Type comma separated css selectors of all target elements (elements you want to customize) in the textarea.
  5. Click on „Select a Font” button to find and select any google, typekit or websafe font.
  6. Search for a specific font or use filter button to filter the choices.
  7. Click on the selected font.
  8. If you chose a google font then you will be presented with an option to choose font weights.
  9. Choose required font weights (and italics variant) for your project and click „Add Font” button.
  10. Now you can see live implementation of your chosen font on your target elements.
  11. You can use „Next Font” or „Previous Font” button to change your choice.
  12. Click on the Gear button to customize other typography elements of your target elements.
  13. Check „Temporarily Highlight Elements” checkbox to make sure you have chosen correct elements.
  14. Implement your other font customizations and click [Publish] button.

How to Add Adobe Fonts (Typekit)

  1. Sing-in or create an Adobe ID at Adobe Fonts.
  2. Search or Browse typekit or Adobe fonts. Click on ‘</>’ icon to add fonts to your existing or new web project.
  3. Go to My Adobe Fonts > Web Project and find „Project ID”, which can be found next to the Project name.
  4. Copy „Project ID”.
  5. Go to the Plugin’s WordPress customizer section, and click on „Plugin Advanced Options”.
  6. Paste „Project ID” in the appropriate field and hit arrow icon.
  7. Now Adobe fonts (typekit) will be available for use immediately.

Capturi ecran

  • Simplified font manager target elements.
  • Simplified font manager font selection.
  • Simplified font manager typography controls.
  • Add typekit fonts.

Instalare

Installing “Simplified Font Manager” can be done either by searching for “Simplified Font Manager” via the “Plugins > Add New” screen in your WordPress dashboard, or by using the following steps:

  1. Download the plugin via WordPress.org
  2. Upload the ZIP file through the ‘Plugins > Add New > Upload’ in your WordPress dashboard
  3. Activate the plugin through the ‘Plugins’ menu in WordPress

Întrebări frecvente

Is there any performance impact if I have added the same google font on many different controls?

No. All different google font requests will be merged into one single http request. You can freely add them to different controls without worrying about performance.

Contributori și dezvoltatori

„Simplified Font Manager – Typekit and Google Fonts” este un software open-source. La acest modul au contribuit următoarele persoane.

Contributori

Istoric modificări

1.4.0

  • Modify: Simplify theme integration.
  • Modify: Minor code improvements.
  • Add: Helpful admin notice.

1.3.0

  • Modify: Reset theme default fonts on theme switch.
  • Modify: Font filter styling improvements.
  • Modify: Simplify font selection process.
  • Modify: Update google fonts datafile.

1.2.0

  • Add: Theme support for default google fonts.

1.1.0

  • Add: Option to add Adobe typekit fonts to your website.
  • Error Fix: Re-indexing of saved options after deleting option array element.

1.0.0

  • First version.