{"id":13263,"date":"2020-11-17T16:10:12","date_gmt":"2020-11-17T10:40:12","guid":{"rendered":"https:\/\/weblizar.com\/blog\/?p=13263"},"modified":"2025-08-07T11:21:36","modified_gmt":"2025-08-07T05:51:36","slug":"simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce","status":"publish","type":"post","link":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/","title":{"rendered":"Simple Steps to Follow When Adding a Custom Font Family in TinyMCE"},"content":{"rendered":"

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

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.\u00a0 <\/p>\n

Allow this post to discuss the ideal ways to configure the editor with custom fonts for your users to select from. What\u2019s more, we will offer you ideas on how to set up a custom font as your default editor font if needed. Let\u2019s 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\u2019s dive in!But let\u2019s start first with a quick overview of the standard fonts you can add.<\/p>\n

Which fonts can you use on the web?<\/h3>\n

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:<\/p>\n

Google fonts<\/h3>\n

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\u2019s where we would suggest beginning your search.<\/p>\n

Custom fonts<\/h3>\n

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. <\/p>\n

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\u2019s, 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.<\/p>\n

How to add a custom font family to your menu?<\/h3>\n

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.\u00a0<\/p>\n

Remember that you could add the fontselect dropdown to the list of toolbar controls in the configuration if it isn\u2019t 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<\/a> to the list of your font options highlighted:<\/p>\n

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.<\/p>\n

The default list of font choices will look like this one:<\/h3>\n

Modify the accessible font options. You can do that by overriding the default list by either making a new list or adding it.
\nFor 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\u2019s not that necessary:<\/p>\n

Import your font into TinyMCE<\/h3>\n

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.<\/p>\n

Import your font on your page<\/h3>\n

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.
\nCheck out this example below:<\/p>\n

Import your chosen font on any published pages<\/h3>\n

You will also require ensuring the custom font is imported on any pages where the content is published. That\u2019s especially true even though the steps will include the custom font on the TinyMCE HTML Editor.<\/p>\n

How to set the default font<\/h3>\n

Do you also wish to set your default font to your custom font? There\u2019s 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\u2019s especially true, no matter what your experience with CSS might be. <\/p>\n

Nonetheless, you will find yourself asking too many questions after you have personalized the look of the font. <\/p>\n

Don\u2019t have any prior experience with CSS? Then such customization could be difficult to accomplish. That\u2019s why we\u2019d suggest using TinyMCE, offering you flexibility when adding a unique font to your page.\u00a0We hope you have provided you useful tips on how to add a custom-font<\/a> family in TinyMCE.<\/p>\n

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!<\/p>\n","protected":false},"excerpt":{"rendered":"

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<\/p>\n","protected":false},"author":6,"featured_media":13266,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[3029,3030,3031,3032],"tags":[3034,3036,3033,3035],"class_list":["post-13263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-custom-font-family","category-font-on-your-page","category-google-font","category-set-the-default-font","tag-custom-font-family","tag-font-on-your-page","tag-google-font","tag-set-the-default-font"],"yoast_head":"\nSimple Steps to Follow When Adding a Custom Font Family in TinyMCE<\/title>\n<meta name=\"description\" content=\"Are you trying to create the next generation of transformational software products? If yes, we know how badly you wish to offer the custom font experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple Steps to Follow When Adding a Custom Font Family in TinyMCE\" \/>\n<meta property=\"og:description\" content=\"Are you trying to create the next generation of transformational software products? If yes, we know how badly you wish to offer the custom font experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/\" \/>\n<meta property=\"og:site_name\" content=\"Weblizar Blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/weblizarwp\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-17T10:40:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-07T05:51:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2020\/11\/Simple-Steps-to-Follow-When-Adding-a-Custom-Font-Family-in-Tiny-MCE-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"506\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"weblizar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@weblizar\" \/>\n<meta name=\"twitter:site\" content=\"@weblizar\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"weblizar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple Steps to Follow When Adding a Custom Font Family in TinyMCE","description":"Are you trying to create the next generation of transformational software products? If yes, we know how badly you wish to offer the custom font experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/","og_locale":"en_US","og_type":"article","og_title":"Simple Steps to Follow When Adding a Custom Font Family in TinyMCE","og_description":"Are you trying to create the next generation of transformational software products? If yes, we know how badly you wish to offer the custom font experience.","og_url":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/","og_site_name":"Weblizar Blog","article_publisher":"http:\/\/www.facebook.com\/weblizarwp","article_published_time":"2020-11-17T10:40:12+00:00","article_modified_time":"2025-08-07T05:51:36+00:00","og_image":[{"width":900,"height":506,"url":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2020\/11\/Simple-Steps-to-Follow-When-Adding-a-Custom-Font-Family-in-Tiny-MCE-1.jpg","type":"image\/jpeg"}],"author":"weblizar","twitter_card":"summary_large_image","twitter_creator":"@weblizar","twitter_site":"@weblizar","twitter_misc":{"Written by":"weblizar","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/#article","isPartOf":{"@id":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/"},"author":{"name":"weblizar","@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/9bf5f8659333cb8cb24b2a4f6799bb6a"},"headline":"Simple Steps to Follow When Adding a Custom Font Family in TinyMCE","datePublished":"2020-11-17T10:40:12+00:00","dateModified":"2025-08-07T05:51:36+00:00","mainEntityOfPage":{"@id":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/"},"wordCount":1030,"commentCount":0,"image":{"@id":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/#primaryimage"},"thumbnailUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2020\/11\/Simple-Steps-to-Follow-When-Adding-a-Custom-Font-Family-in-Tiny-MCE-1.jpg","keywords":["Custom Font Family","Font On Your Page","Google Font","Set The Default Font"],"articleSection":["Custom Font Family","Font On Your Page","Google Font","Set the default font"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/","url":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/","name":"Simple Steps to Follow When Adding a Custom Font Family in TinyMCE","isPartOf":{"@id":"https:\/\/weblizar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/#primaryimage"},"image":{"@id":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/#primaryimage"},"thumbnailUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2020\/11\/Simple-Steps-to-Follow-When-Adding-a-Custom-Font-Family-in-Tiny-MCE-1.jpg","datePublished":"2020-11-17T10:40:12+00:00","dateModified":"2025-08-07T05:51:36+00:00","author":{"@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/9bf5f8659333cb8cb24b2a4f6799bb6a"},"description":"Are you trying to create the next generation of transformational software products? If yes, we know how badly you wish to offer the custom font experience.","breadcrumb":{"@id":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/#primaryimage","url":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2020\/11\/Simple-Steps-to-Follow-When-Adding-a-Custom-Font-Family-in-Tiny-MCE-1.jpg","contentUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2020\/11\/Simple-Steps-to-Follow-When-Adding-a-Custom-Font-Family-in-Tiny-MCE-1.jpg","width":900,"height":506,"caption":"Simple Steps To Follow When Adding a Custom Font Family in Tiny MCE"},{"@type":"BreadcrumbList","@id":"https:\/\/weblizar.com\/blog\/simple-steps-to-follow-when-adding-a-custom-font-family-in-tinymce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/weblizar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Simple Steps to Follow When Adding a Custom Font Family in TinyMCE"}]},{"@type":"WebSite","@id":"https:\/\/weblizar.com\/blog\/#website","url":"https:\/\/weblizar.com\/blog\/","name":"Weblizar Blog","description":"Update yourself with all the latest tech news revolving around wordpress all at one place","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/weblizar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/9bf5f8659333cb8cb24b2a4f6799bb6a","name":"weblizar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/928b1041d6ec32e582ed281b0bd3d658fab1399de7a4b9b7de1d9fa9cf0da608?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/928b1041d6ec32e582ed281b0bd3d658fab1399de7a4b9b7de1d9fa9cf0da608?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/928b1041d6ec32e582ed281b0bd3d658fab1399de7a4b9b7de1d9fa9cf0da608?s=96&d=mm&r=g","caption":"weblizar"}}]}},"_links":{"self":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts\/13263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/comments?post=13263"}],"version-history":[{"count":0,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts\/13263\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/media\/13266"}],"wp:attachment":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/media?parent=13263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/categories?post=13263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/tags?post=13263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}