This feature allows you to independently choose which fonts will be displayed in the Plugin for your customers.
Please be advised that this option is available only for paid subscription plans.
It additionally allows you:
expand the list of available fonts displayed in the editor by adding own web fonts from popular services, like Google fonts and others;
reduce the list of fonts to a limited number of options by removing the default fonts.
The list of fonts that should be displayed in the editor must be defined each time the editor is initialized. This approach helps you implement a variety of scenarios on your end. For example:
you want your users to customize the list of fonts loaded in the editor when they edit emails. For this purpose, you can create an interface in your app and configure the editor accordingly;
you are a digital marketing agency, and you want to customize the list of fonts in the editor according to a client’s brand for whom the email template is being created.
Please find the example of the code below:
"editorFonts": {
"showDefaultStandardFonts": true,
"showDefaultNotStandardFonts": true,
"customFonts": [
{
"name": "Oswald",
"fontFamily": "'Oswald', 'helvetica neue', helvetica, arial, sans-serif",
"url": "https://fonts.googleapis.com/css?family=Oswald"
},
{
"name": "Barriecito",
"fontFamily": "'Barriecito', cursive",
"url": "https://fonts.googleapis.com/css?family=Barriecito&display=swap"
}
]
}
Please find the descriptions of the parameters below on the screenshot:
Important to note: Stripo accepts only the CSS font embedding method, and the CSS file must be hosted in HTTPS protocol. You can use services like Google fonts that provide host font stacks and a well-formatted CSS file.
If you want to change the default set of fonts, you need to disable them and use custom fonts to indicate a new set, including the URL parameter for web fonts. In this case, you don’t have to pass the URL parameter to the fonts from the "Standard fonts" list.
How to add an option to include a custom font in the font selector?
If you want to extend the functionality of fonts and add the possibility to add own font for your customers, we have a solution for you.
You should add an appropriate script in the body section and call as externalCustomFont: window.ExternalCustomFont in the initialization script.
An example of initialization and script you will find follow the link.
As an outfit, it allows you to have an additional field in the font list, which you can set up with a click. After, your customer will open the pop-up window with the following parameters:
"name",
"fontFamily",
"url"
After they filled the data and click the "OK" button, the new font will be connected to the editor.
Also, you have the ability to override the button's tooltip by passing the "addCustomFontTitle" parameter:
addCustomFontTitle: 'Add your custom font here'
Result:
How to add a config with favorite fonts that will be displayed in the drop-down list in the "Favorite fonts" ?
If you would like to add your favorite fonts as the separate part in the drop-down list, please use this config:
{
"editorFonts": {
"showDefaultStandardFonts": true,
"showDefaultNotStandardFonts": true,
"favouriteFonts": {
"label": "Favourite Fonts",
"values": [
{
"name": "Barriecito",
"fontFamily": "'Barriecito', cursive",
"url": "https://fonts.googleapis.com/css?family=Barriecito&display=swap"
}
]
}
}
}
As the result:
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.