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

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.

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

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.

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

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

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..
 

Ooops, here is the attached file. EDIT: Currently cannot upload image...

Ok, had a break, come back and still no deal.

I have the following in my ValpakCommon theme:

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.

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 localhost.telerik.com/.../ 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 www.fontsquirrel.com/.../PT-Sans

Hello Ivan & Jochem

Thank you very much for all the info, it is most appreciated.