Google Fonts - Sitecore

Add Google Fonts to Rich Text Editor in Sitecore

Posted by

So you wanted to add some custom fonts to your Rich Text Editor in Sitecore but you are unsure how? Let me show you. As a final product we want to see something like this:

Where to start?

First we need to check some settings. Open your Sitecore.config and check for WebStylesheet setting. It should look like this:

<!--  WEB SITE STYLESHEET
        CSS file for HTML content of Sitecore database.
        The file pointed to by WebStylesheet setting is automatically included in Html and Rich Text fields.
        By using it, you can make the content of HTML fields look the same as the actual Web Site
  -->
<setting name="WebStylesheet" value="/default.css" />

We will use this default.css to add our fonts into Rich Text Editor. Now we need to chose fonts and easiest way to do is by using Google Font. Head out to fonts.google.com and select fonts you want to use in Rich Text Editor.

As you can see in the picture above i can add multiple fonts into bucket by pressing on + icon next to the font. Next, on the bottom, you will have Profiles Selected window that we will use. Click on @IMPORT and copy content of that somewhere in notepad. Do the same for Specify in CSS section to. Now we need to migrate this lines into our default.css file. You need to end up with something looking like this:

As you can see, i used @import command for each font and separated them accordingly. This way i can remove one of them easily. Under the imports we need to specify font css class for each font. In the picture above you can see acme font with his font family defined. When you have your font imported switch to Sitecore.

Switch to core database. Depending on the profile you are using, navigate to that profile. In this example i will use profile under:

/sitecore/system/Settings/Html Editor Profiles/Rich Text Full

You will see folder named Font Names under this profile. Open that up and you will already have couple of default Fonts defined. For each font you added in default.css you will need to create a item in Font Names. In this example bellow i’m showing how acme font is defined. Most important setting here is that value field of font item matches the css class for that font we added in default.css

You are now ready to use your fonts. Open Rich Text Editor and play with fonts on your text. CSS defined in WebStyleSheet option is also initialized on the front-end site. So, all of your font changes on text on Rich Text fields will also be visible on the front-end part with no additional settings changed.