Simple Steps to Follow When Adding a Custom Font Family in TinyMCE

• Custom Font Family , Font On Your Page , Google Font , Set the default font
• Custom Font Family, Font On Your Page, Google Font, Set The Default Font

Are you trying to create the next generation of transformational software products? If yes, we know how badly you wish to offer the best possible user experience for all your users.

Fortunately, this is where TinyMCE rich text editor comes to the rescue. The editor is equipped with a default selection of formatting options and features. But not just that! You can also personalize it to offer nearly any UI or UX. 

Allow this post to discuss the ideal ways to configure the editor with custom fonts for your users to select from. What’s more, we will offer you ideas on how to set up a custom font as your default editor font if needed. Let’s say you have already got an illustration of TinyMCE up and running. You are already aware of ways on how to configure the editor by changing the initialization script.Are you ready? Then let’s dive in!But let’s start first with a quick overview of the standard fonts you can add.

Which fonts can you use on the web?

You can add virtually any font to any website. Nonetheless, you wish to keep in mind the cost, the license agreement, and the method of installation when looking for a font online. Below are some of the excellent font choices you can consider today:

Google fonts

These fonts from Google are 100% free, featuring a stunning library of approximately 1,000 libre license fonts, which could be browsed through their interactive online directory. Did you know that Google Fonts are the most straightforward fonts to add to your site due to their Developer API? That’s where we would suggest beginning your search.

Custom fonts

Font Squirrel is sought-after for its Font Generator and Font Identifier in addition to its wide array of free fonts licensed for commercial projects. Take note that the Web font Generator enables you to convert any font you legally acquire the rights to. You can then convert that into any usable Web Font Kit, which is composed of a simple to use Cascading Style Sheet.

Adobe Fonts These fonts are premium that offers a variety of more than 14,000 unique and beautiful fonts. The new and enhanced service today offers Creative Cloud subscribers along with hassle-free access to the whole library of fonts with a simple click of a button. Adobe Fonts, compared to Typekit’s, has eliminated the limits on page views. Hence, they have made each of their font available for both web use and desktop use. Take note that Adobe Fonts begin at $20.99 every month.

How to add a custom font family to your menu?

Keep in mind, folks, that TinyMCE is equipped with seventeen fonts options by default. Users can pick a font from the toolbar or the menubar through the fontselect dropdown. But that will still depend on the editor configuration. 

Remember that you could add the fontselect dropdown to the list of toolbar controls in the configuration if it isn’t already available on the toolbar. A good example of this is the following: Here are the things you need to do to add a custom fonts family to the list of your font options highlighted:

Include the font as a menu option. The first thing you need to do is to change the list of accessible options by using font_formats. That will enable your users to have their preferred font as an option to select from.

The default list of font choices will look like this one:

Modify the accessible font options. You can do that by overriding the default list by either making a new list or adding it.
For instance, you wish to add the Oswald font. You can include it to the default list as follows. Bear in mind that alphabetical order is suggested, but it’s not that necessary:

Import your font into TinyMCE

The next thing you need to do is to import your font into the CSS of TinyMCE. You can do that using content_style or content_css. It will enable any text written in the editor in that same style to render efficiently and effectively. You would import your preferred font as follows, continuing with a similar example below: You can check out our blog post on how to replace the default font if you wish more details about the use of content_style and content_css.

Import your font on your page

The third step is to import your font on the page where TinyMCE is embedded. This step will enable you to render the font correctly when shown in the menus of TinyMCE.
Check out this example below:

Import your chosen font on any published pages

You will also require ensuring the custom font is imported on any pages where the content is published. That’s especially true even though the steps will include the custom font on the TinyMCE HTML Editor.

How to set the default font

Do you also wish to set your default font to your custom font? There’s no need to worry. You can set the font family in your editor CSS. A good example of this is the following: To sum up, adding a unique font to your website is an excellent way to make your overall design stand out online. Following the instructions in this post will offer you the capability to integrate any font to any website building platform. That’s especially true, no matter what your experience with CSS might be.

Nonetheless, you will find yourself asking too many questions after you have personalized the look of the font.

Don’t have any prior experience with CSS? Then such customization could be difficult to accomplish. That’s why we’d suggest using TinyMCE, offering you flexibility when adding a unique font to your page. We hope you have provided you useful tips on how to add a custom-font family in TinyMCE.

What are your thoughts about this article? Do you find it helpful? We want to know! Feel free to share your insights with us by leaving your comments down below!