Adding fonts to Text Editor - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Adding fonts to Text Editor

  • Adding fonts to Text Editor
  • 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?

     

  • 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? 

  • 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;

  • 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