Home

Awesome

SwagTinyMceCustomFont

Disclaimer

The plugin was tested in Shopware 5.3 using the fonts from Google Fonts.

Description

The plugin provides you with the ability to register & add custom fonts for the WYSIWYG editor TinyMCE. The editor is used throughout in almost very module in your Shopware administration interface. The plugin automatically imports the font urls in the administration for the preview of the custom font in the editor as well as in the store front of your Shopware shop. The font imports will be included in the compiled CSS file.

Installation

The plugin uses the new plugin system we've introduced with Shopware 5.2. Therefore you have to install the plugin in the folder custom/plugins of your Shopware installation. Next head to the plugin manager and install the plugin.

Configuration

Screenshot settings

"SwagTinyMceCustomFont" plugin configuration

Example usage

  1. Upload & install the plugin using the plugin manager
  2. Go to Google Fonts
  3. Choose a font and click on the panel at the bottom right hand of the screen
  4. Under the tab "Embed" click the "@import" link
  5. Copy the URL (only the URL, leave out the "@import url()" part)
  6. Head over to the plugin configuration and paste in the copied URL
  7. Back to Google Fonts in the section "Specify in CSS" copy the CSS definition of the font (the part after "font-family")
  8. Add the font name followed by an equal sign and paste in the copied CSS definition. The added string should look like this: Roboto='Roboto',sans-serif;
  9. Save the plugin configuration, clear the cache, warm up the theme cache & reload the backend

License

The MIT License (MIT). Please see License File for more information.