We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. jQuery
  4. Is it possible to use Web Fonts with ejRTE?

Is it possible to use Web Fonts with ejRTE?

Hello,

I am curious if it's possible to integrate the font selections in ejRTE with Web Fonts such as Google Fonts.  The result would be that the font selector would only show the web fonts available in the project and these could be applied to the text in the editor.

I see how to add fonts to the font selector list using the fontName member.  What I don't know is if these fonts have to be installed on the local machine. or if the font name can refer to a web font used in the project.

Thank you,

Randy

1 Reply
HP Harikrishnan P Syncfusion Team July 21, 2015 02:52 PM UTC

Hi Randy,

Query: I see how to add fonts to the font selector list using the fontName member.  What I don't know is if these fonts have to be installed on the local machine. Or if the font name can refer to a web font used in the project.

Thanks for using Syncfusion products.

To use web fonts in EJ RTE, it is not needed for the web fonts to be present in local machine. To add the web fonts to EJ RTE, we need to append the web font link to the RTE Iframe <head> tag. We can achieve this in the “create” event of the RTE as shown below.


            $("#rteSample").ejRTE({

                width: "550px",

                showFooter: true,

                fontName:fonts,

                create: function () {

                    var $head = this._rteIframe.contents().find("head");

                    var url = "Styles/styles.css";

                    $head.append($("<link/>", { rel: "stylesheet", rel='nofollow' href: 'http://fonts.googleapis.com/css?family=Roboto', type: "text/css" }));

                    $head.append($("<link/>", { rel: "stylesheet", rel='nofollow' href: 'http://fonts.googleapis.com/css?family=Great+Vibes', type: "text/css" }));

                }

            });



We have prepared an example sample to showcase this. Please check with the following link

http://jsplayground.syncfusion.com/wvgzynhq

In the above link you can see that we have added two Google web fonts (“Roboto” and “Great vibes”) to EJ RTE.

Please let us know if you have further queries.

Regards,
HariKrishnan

Loader.
Live Chat Icon For mobile
Up arrow icon