Adding fonts to Text Editor

Posted by Community Admin on 04-Aug-2018 19:39

Adding fonts to Text Editor

All Replies

Posted by Community Admin on 22-Jun-2016 00:00

How do you add fonts to Text Editor so you can use them in the content block, blogs etc. I tried doing it from within my  theme by overriding the style of the custom box however it does not work. Does anyone have any suggestions to go about this? I have 6 fonts to add in which they need to be able to be used in the front-end on the page design. Would it be easier overriding it using a theme or adding them to Text Editor?

 

Posted by Community Admin on 23-Jun-2016 00:00

Hi Stepahnie

You need to do it with CSS.  You can find more information about css inside you theme ob this link: http://docs.sitefinity.com/custom-themes-and-templates-create-the-css-of-the-theme

For example for change font size of Heading 1 (h1 tag) only inside content blocks you need to write this css code

.sfContentBlock h1
    font-size: 50px;

Posted by Community Admin on 23-Jun-2016 00:00

I tested the code, all changes occur except for the font. 

@font-face<br>       

font-family: 'QuickSand-Italic';<br>       

src: url('..fonts/Quicksand-Italic.otf') format('opentype');<br>   

font-style: normal;<br>    font-weight: normal;

/*Section is CSS File*/

.sfContentBlock h1 font-family:'QuickSand-Italic'; color: orange;

 

Is there something wrong with my code? 

Posted by Community Admin on 24-Jun-2016 00:00

Can you open Developer Tools in you Chrome and open you page, where font is not working. Do you have any errors in console?

It looks like you web server need to setup correct mime type for .otf files

<staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    <remove fileExtension=".ttf" />
    <mimeMap fileExtension=".ttf" mimeType="application/font-ttf" />
    <remove fileExtension=".eot" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <remove fileExtension=".otf" />
    <mimeMap fileExtension=".otf" mimeType="application/font-otf" />
</staticContent>

 

Let me know, if you have any questions

This thread is closed