Add custom font to Sitefinity theme?

Question

enter code hereI am working on a Sitefinity 3.7 site and the template I'm building requires some custom fonts from the 'opensans' font family. I created a folder called "Fonts" inside the theme I made for this template and put the .svg, .eot, .tff, and .woff files in there. In the style sheet, I have tried setting up some of the opensans fonts I will be using but they don't appear to be working--I just see standard Arial/Verdana fonts in the browser.

@font-face {
    font-family: 'open_sansregular';
    src: url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.eot');
    src: url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.woff') format('woff'),
         url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.svg#opensansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

I figure I must be doing this wrong but I'm not sure what's wrong. I've never tried to add in custom fonts into a Sitefinity site before, and I know this is an old site, but I can't help the latter.

Is there a way to get these opensans fonts to work for my template?

Answer 1

Add this cdn from google fonts in your header and apply the css to any element you wish to have Open Sans as the font.

HTML

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

CSS

font-family: 'Open Sans', sans-serif;

Here is the original link so you can edit the information and view the documentation if you wish: http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans