Skip to content
A Wordpress plugin that let's users interactively preview and test webfonts
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
admin fixed css compatibility to other plugins (avoid .slider class) and im… Apr 16, 2018
css fixed css compatibility to other plugins (avoid .slider class) and im… Apr 16, 2018
icons added fontcustom to generate icon font for UI elements May 11, 2017
includes updated supporters to about page Apr 16, 2018
js fixed css compatibility to other plugins (avoid .slider class) and im… Apr 16, 2018
lang added dutch translations Jan 29, 2018
supporter-logos updated changelog and readme for 0.4.0 Apr 3, 2018
vendor first steps at transforming template rendering to use twig Mar 4, 2017
.fontcustom-manifest.json added fontcustom to generate icon font for UI elements May 11, 2017
.gitignore fixed a false positive on directory permissions check, causing custom… Jul 24, 2017
.jsbeautifyrc
.jshintrc modified activation hook to check and show changelog only for new ins… Apr 3, 2018
.php_cs modified activation hook to check and show changelog only for new ins… Apr 3, 2018
FontsamplerDatabase.php adds color picker for #123 to select highlight color Mar 26, 2018
FontsamplerFormhandler.php
FontsamplerHelpers.php implemented automatic https asset paths, fixes #140 Mar 30, 2018
FontsamplerLayout.php basic implementation for #111, #2 Jan 26, 2018
FontsamplerMessages.php switched to using default Wordpress error messages, closes #93 Mar 30, 2018
FontsamplerNotifications.php added permissions check for css folder, as per #80 Apr 20, 2017
FontsamplerPagination.php more styling and twig fixes Mar 23, 2017
FontsamplerPlugin.php version bump to 0.4.2, fixing another E_WARNING... Apr 4, 2018
LICENSE.txt added more detailed license information Oct 12, 2016
README.md
bower.json implements RTL sliders for #73, better initialisation hooks Jan 21, 2018
build-admin.js implemented automatic https asset paths, fixes #140 Mar 30, 2018
build.js removed some not required dependencies, update changelog Oct 19, 2017
changelog.txt fixed css compatibility to other plugins (avoid .slider class) and im… Apr 16, 2018
fontcustom.yml added fontcustom to generate icon font for UI elements May 11, 2017
fontsampler.php fixed css compatibility to other plugins (avoid .slider class) and im… Apr 16, 2018
makepot test translation file from lang dir Jan 19, 2018
package-lock.json Added slider, dropdown and select button callbacks implementing #102 Feb 2, 2018
package.json minor fix to OT modal button css class toggle Oct 21, 2017
r.js js bundling into single file Oct 15, 2017
readme.txt fixed css compatibility to other plugins (avoid .slider class) and im… Apr 16, 2018
uninstall.php moved uninstall to seperate file, again Jul 24, 2017

README.md

Fontsampler Wordpress Plugin (v 0.4.3)

This plugin allows Wordpress users to embed interactive webfont previews in their websites.

How does it work?

After installing and activating the plugin the Wordpress admin can create Fontsamplers. Each Fontsampler can be embedded in any Wordpress Page or Post with a simple shortcode like so:

[fontsampler id=123]

In the place of the shortcode the plugin will render the appropriate interface for previewing and manipulating the font. Each Fontsampler instance can be fully configured:

  • Features available to the user
  • Styling and layout order
  • Fonts used in this instance

Advanced shortcode use

Aside from defining the Fontsampler settings in the admin area, you can also use the following shortcode attributes. This is mostly useful for developers using the plugin to dynamically create Fontsamplers with Wordpress' do_shortcode() method:

This will set or overwrite the Fontsampler's initial text:

[fontsampler text="Lorem ipsum"]

You can also pass in fonts dynamically (i.e. without actually defining a Fontsampler in the admin area). This Fontsampler will use the default settings.

[fontsampler fonts="{"woff":"json-encoded/path-to/fontfile.woff", "name":"Display name of the font", "initial":true},{"woff":"json-encoded/path-to/another-fontfile.woff", "name":"Display name of the other font", "initial":false}"]

Essentially the fonts attribute takes a json_encodeed array without the opening and closing brackets (since these would break the shortcode).

To use and print the shortcode in any of your templates, use it with Wordpress’ do_shortcode() function like this:

<?php
echo do_shortcode('[fontsampler id=1']);
?>

But the real benefit of this is dynamically loading fonts based on your template data with the above fonts attribute passed to the shortcode.

Hooks

More action and filter hooks are planned, but for now there is:

filter: fontsampler_enqueue_styles(false) Fontsampler styles are automatically added to any pages that have the fontsampler shortcode on them. If you executing the shortcode programatically and want the fontsampler styles to correctly load in the header, you can use this filter hook to return true (on those specific pages).

Reacting to Javascript events in your theme

If you are a developer wanting to interact with Fontsampler instances you can react to the following javascript events being triggered on the Fontsampler wrappers.

fontsampler.events.afterinit Called when all fonts are loaded and the Fontsampler is active. Params: Object event

fontssampler.events.activatefont Called when a font is activated or switched. Params: Object event

fontsampler.event.activateopentype Called when the modular dialog for opentype features is opened. Params: Object event, jQuery object $element

fontsampler.event.activatealignment Called when the alignment button is pressed Params: Object event, String "alignment" (one of: "left", "right" or "center")

fontsampler.event.activateinvert Called when the invert button is pressed Params: Object event, String "state" (one of: "positive", "negative")

fontsampler.event.activatefontpicker Callend when the font picker dropdown is activated Params: Object event, Object Selectric

fontsampler.event.activatesampletexts' Callend when the sample texts dropdown is activated Params: Object event, Object Selectric

fontsampler.event.changefontsize Called when the font size is changed (on slide end) Params: Object event, int size

fontsampler.event.changelineheight Called when the line height is changed (on slide end) Params: Object event, int line height

fontsampler.event.changeletterspacing Called when the letter spacing is changed (on slide end) Params: Object event, int letter spacing

You can listen to those events with jQuery like so:

$("body").on("fontsampler.event.afterinit", ".fontsampler-wrapper", function (event [, additional]) {
    // do something
});

Current status

The plugin is hosted on the Wordpress plugin directory and you can install it directly from your Wordpress admin panel. The plugin is free to use, including commercial websites. Donations are welcome and support continuous development and improvments. For improvements and suggestions, feel free to get involved by opening issues or feature requests here, or join the discussion group to hear more about the progress and development schedule.

Supporting development

You can donate to the plugin's continuous development effort via PayPal. The first effort in developing this plugin was funded via an indiegogo campaign, which is now closed. Supporters are listed (if they wish) on the plugin's about page and documentation.

Pull requests are more than welcome as well, but let me know in the issues list what you are working on.

Planned features not implemented yet

See the issues for the latest up-to-date information:

Installing preview versions

IMPORTANT DISCLAIMER: Install directly from this repository if you wish to contribute of check out latest development features. For regular use please install via the WP plugin interface. I recommend to test the plugin on backup or local Wordpress installations, not in your website's production environment. At the very least back up your database and wp-content folder before testing the plugin. You have been warned!

  • Go to the releases tab and download the "zip" archive of the latest release
  • In your Wordpress installation in the folder wp-content/plugins extract the archive into a new folder named "fontsampler"
  • Login to your Wordpress admin
  • Go to Plugins and activate the plugin
  • You can now access the plugin options in the sidebar under ¶ Fontsampler

License

This code is distributed under the GNU General Public License v3.0. See license

Read a simplified version of what this license means

(c) 2016-2018 Johannes Neumeier

You can’t perform that action at this time.