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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Is it possible to use Web Fonts with ejRTE?

Thread ID:

Created:

Updated:

Platform:

Replies:

119653 Jul 17,2015 09:21 PM UTC Jul 21,2015 02:52 PM UTC JavaScript 1
loading
Tags: ejRTE
Randy Craven
Asked On July 17, 2015 09:21 PM UTC

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

Harikrishnan P [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;