How to Add Google Web Font to TinyMCE Editor

Mar 25, 2014 at 1:35 AM
Edited Mar 25, 2014 at 1:36 AM
Hi All!

The font collection that comes with tinymce is very limited in choices. How do I add the Google Web Font to the font collection?


Mar 25, 2014 at 12:58 PM
After making a collection of Google Web Fonts('Diplomata' and 'Sofadi One' in this example) you will end up with a link something like this,
taken from from the "Choose | Review | Use" buttons on that page.

<link href='|Sofadi+One' rel='stylesheet' type='text/css'>

Following 3 changes then need to be applied to tinyMCE.ascx


<%-- Start of file --%>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="tinyMCE.ascx.cs" Inherits="Admin.TinyMce" %>
<%@ Import Namespace="BlogEngine.Core" %>

<%--Add link to custom fonts somewhere around here --%>
<link href='|Sofadi+One' rel='stylesheet' type='text/css'>
Following 2 changes inside tinyMCE.init function


At a suitable position add setting that includes default fonts + new fonts
font_formats: "Andale Mono=andale mono,times;"+
        "Arial Black=arial black,avant garde;"+
        "Book Antiqua=book antiqua,palatino;"+
        "Comic Sans MS=comic sans ms,sans-serif;"+
        "Courier New=courier new,courier;"+
        "Times New Roman=times new roman,times;"+
        "Trebuchet MS=trebuchet ms,geneva;"+
        "Wingdings=wingdings,zapf dingbats;" +
        "Diplomata=Diplomata;" +
        "Sofadi One=Sofadi One",
Note: semi-colon delimited on all but the last entry.


Look for content_css setting, it's a comma separated string listing custom CSS files.
Add the href value from the web font link.
content_css: "css/content.css,|Sofadi+One",
Mar 26, 2014 at 1:10 AM
Edited Mar 26, 2014 at 1:37 AM
Thanks Andy!

The code above works great!