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

Forums / Developing with Sitefinity / How to add and use a custom font / @font-face in Sitefinity 5.4

How to add and use a custom font / @font-face in Sitefinity 5.4

11 posts, 0 answered
  1. Richard
    Richard avatar
    49 posts
    Registered:
    13 Jul 2010
    24 Oct 2013
    Link to this post
    Hello there.

    This is driving me nuts. I'm trying to add a custom font to a SF website of mine but getting nowhere fast. I have the following CSS:

    @font-face {
        font-family: 'opensanslight', sans-serif;
        src: url('~/App_Data/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.eot');
        src: url('~/App_Data/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.eot?#iefix') format('embedded-opentype'),
             url('~/App_Data/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.woff') format('woff'),
             url('~/App_Data/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.ttf') format('truetype'),
             url('~/App_Data/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.svg#opensanslight') format('svg');
        font-weight: normal;
        font-style: normal;
    }

       .headerTagline h1 {
            font-family: 'opensanslight', sans-serif;
            font-weight: normal;
        }
     
    The .eot, svg, etc. files are all where the source url is pointing to but no matter what browser I use, I cannot get this custom font to appear. (I do acknowledge that this won't work in anything below IE 9 but even in Chrome and Firefox, I cannot get this to display)

    I really hope I'm being stupid as this is really bugging me.
  2. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    24 Oct 2013 in reply to Richard
    Link to this post
    Hi Richard,

    What happens if you place the font files inside a folder in the root of your project?
    Are those file extensions being served on your webserver? E.g. when hosting on IIS6 you will probably need to add the mime-types to IIS or you web.config.

    Kind regards,
    Daniel
  3. Richard
    Richard avatar
    49 posts
    Registered:
    13 Jul 2010
    24 Oct 2013 in reply to Daniel Plomp
    Link to this post
    I have not tried adding the folder to the root so will give that a go first then make sure the files are being served.
  4. Craig
    Craig avatar
    82 posts
    Registered:
    07 Apr 2009
    24 Oct 2013
    Link to this post
    Richard,

    The reason why you are having issues is due to the URL.  The App_Data folder in ASP.NET web sites is a special folder and cannot be navigated to directly.  You should be to do one of the following...

    Start the path with "/Sitefinity".  For example...
    /Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.eot

    Use a relative path from your CSS file inside your theme.  I prefer this option the best unless you are adding this CSS directly to the page with a CSS widget.  Below is an example of what you would do if your CSS files are in a folder labeled "css" and next to your "fonts" folder.

    ../fonts/opensans-light.eot

    Hopefully you find this helpful.

    Craig
  5. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    24 Oct 2013 in reply to Craig
    Link to this post
    Yeah, Craig is right. Better to use those absolute paths.
    Nevertheless I would move assets like these out of the App_Data folder.

    Anyway, you should be good to go with these suggestions I think?

    Kind regards,
    Daniel
  6. Richard
    Richard avatar
    49 posts
    Registered:
    13 Jul 2010
    24 Oct 2013 in reply to Daniel Plomp
    Link to this post
    Sorry gents I must be losing the plot (might be time to grab some lunch!)

    I have placed the font files in the attached image location. EDIT: I can't attach the image and uploaded it at present as I'm getting a 500 error, helpful!

    Essentially it has this structure:

    SitefinityWebApp > Sitefinity > WebsiteTemplates > Templates > App_Themes > ValpakCommon ?fonts


    I've then used this CSS to try and add the font but without success. Any ideas? Perhaps I just need a break..
     
    @font-face {
        font-family: 'opensanslight', sans-serif;
        src: url('/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.eot');
        src: url('/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.eot?#iefix') format('embedded-opentype'),
             url('/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.woff') format('woff'),
             url('/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.ttf') format('truetype'),
             url('/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon/fonts/opensans-light.svg#opensanslight') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  7. Richard
    Richard avatar
    49 posts
    Registered:
    13 Jul 2010
    24 Oct 2013 in reply to Daniel Plomp
    Link to this post
    Ooops, here is the attached file. EDIT: Currently cannot upload image...
  8. Richard
    Richard avatar
    49 posts
    Registered:
    13 Jul 2010
    24 Oct 2013 in reply to Craig
    Link to this post
    Ok, had a break, come back and still no deal.

    I have the following in my ValpakCommon theme:

    @font-face {
        font-family: 'opensans-light', sans-serif;
        src: url('../fonts/opensans-light.eot');
        src: url('../fonts/opensans-light.eot?#iefix') format('embedded-opentype'),
             url('../fonts/opensans-light.woff') format('woff'),
             url('../fonts/opensans-light.ttf') format('truetype'),
             url('../fonts/opensans-light.svg#opensanslight') format('svg');
        font-weight: normal;
        font-style: normal;
    }
     
       .headerTagline h1 {
            font-family: 'opensans-light', sans-serif;
            font-weight: normal;
        }

    And the attached file should display where everything is.

    EDIT: Arrrrgggggh!!!!! I still cannot attach an image. Ok, I have my App_Data/Sitefinity/WebsiteTemplates/Templates/App_Themes/ValpakCommon  folder structure  and under this I have three folders: fonts (contains the font files), Global (contains the css files including ValpakCommon.css where I'm trying to add the @font-face) and Images (contains images). 

    Am I going mad? I feel like I'm going mad.
  9. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    29 Oct 2013
    Link to this post
    Hi Richard,

     Embedding a font in Sitefinity should not cause such distress. All you need to do is apply it to a theme or a template with an outside link to the CSS that you wish to apply.As I am not familiar with the Font face in question I tested the font-awesome iconic font on my machine and it worked fine. The only problem I encountered is the "RadEditor filters for Content block widget"  which i changed from default to "RemoveScripts" (you can put other filters too). The editor can be found under Administration -> Settings -> Advanced -> Appearance. This editor was preventing me from typing the <i> tag this font uses. After this everything went smoothly. Have a look at this video in order to trace my steps.

    Additionally, you may want to choose to add the font in your configuration files. This approach is a bit more complex as you need to create a configuration class. Detailed information on how to do that can be found here.

    Regards,
    Ivan D. Dimitrov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    30 Oct 2013 in reply to Richard
    Link to this post
    Hey Richard,

    First the path issue (being a stickler here, but you never know for future reference).
    Theme based is the best approach. 

    So your deep folder structure and inside a seperate fonts folder where you point to fonts using url('.../') is best.

    The problem with /fonts (from the 'root') pointing to a root is when Sitefinity isn't running in the root of a site, then it'll point to a wrong folder.

    (I have a dev machine setup with IIS pointing to localhost.telerik.com and I create 'web apps' inside that. So while http://localhost.telerik.com/sfv624900/ is the start of my app - a css based / points to http://localhost.telerik.com)

    ---
    So in the latest sample you've got the folder structure right but there's a slight typo on the font-family.
    With an @font-face declaration, you declare a single font. So the , sans-serif needs to go.

    Later on, on the H1 tag you apply a font-family, and there is where you can say use sans-serif as a fallback.

    ---
    Sometimes Chrome has a glitch rendering webfonts, there's a hack for it which uses a media-query to only apply the .svg.

    I've included it below in a sample markup using the PT-Sans font from http://www.fontsquirrel.com/fonts/PT-Sans

    @font-face {
        font-family: 'pt_sansbold';
        src: url('../fonts/PTS75F-webfont.eot');
        src: url('../fonts/PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/PTS75F-webfont.woff') format('woff'),
             url('../fonts/PTS75F-webfont.ttf') format('truetype'),
             url('../fonts/PTS75F-webfont.svg#pt_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
    @media screen and (-webkit-min-device-pixel-ratio:0) {
     
        @font-face {
        font-family: 'pt_sansbold';
        src: url('../fonts/PTS75F-webfont.svg#pt_sansbold') format('svg');
        }
     
    }
     
    h1 {
        font-family: 'pt_sansbold', Helvetica, Arial, sans-serif;
        font-weight: normal;
        }


    Jochem.
  11. Richard
    Richard avatar
    49 posts
    Registered:
    13 Jul 2010
    04 Nov 2013 in reply to Jochem Bökkers
    Link to this post
    Hello Ivan & Jochem

    Thank you very much for all the info, it is most appreciated.
11 posts, 0 answered