+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Adding fonts to Text Editor

Adding fonts to Text Editor

4 posts, 0 answered
  1. Stepahnie
    Stepahnie avatar
    18 posts
    Registered:
    19 May 2016
    22 Jun
    Link to this post

    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?

     

  2. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    23 Jun in reply to Stepahnie
    Link to this post

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

  3. Stepahnie
    Stepahnie avatar
    18 posts
    Registered:
    19 May 2016
    23 Jun
    Link to this post

    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? 

  4. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    24 Jun in reply to Stepahnie
    Link to this post

    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

4 posts, 0 answered