Display custom font in SharePoint 2010

I needed to use custom font for text on my SharePoint 2010. Never done this before even on regular asp sites. After a few search on Google, I realise all I need to do is to store the font on the site like store images. Then point to the file in CSS using @font-face. After that, in the CSS class, use the font by referring to  the name of the font specified in the @font-face. Simple as!~

However, for some reason, in SharePoint, this method didn’t work for me. I used the following code in the CSS file:

@font-face{
 font-family:'MyFont';
 src: url('/Style%20Library/GWCustom Styles/font/HelveticaNeueLTPro-Cn.otf');
}

H1.ms-rteElement-H1
{
-ms-name:”Heading 1″;
}
.ms-rteElement-H1
{
font-size:x-large !important;
font-weight:normal;
font-family: ‘MyFont’;
color: aqua;
}

I’ll really appreciate if anyone can tell me what I did wrong.

Another approach was to use Google’s webfont which worked. I went to http://www.google.com/webfonts and chose a font I liked. Added the reference URL to the head section of my master page. In the CSS file, I simply change the font-family to the one that I chose on Google. Here’s the code:

Master page head section:

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

CSS file:

H1.ms-rteElement-H1
{
-ms-name:"Heading 1";
}
.ms-rteElement-H1
{
font-size:x-large !important;
font-weight:normal;
font-family: 'Faster One', cursive;
color: aqua;
}

Useful links:

Using Custom Fonts in Your SharePoint Website: http://www.synergyonline.com/Blog/Lists/Posts/Post.aspx?ID=211

Google Web Font: http://www.google.com/webfonts

Font Space: http://www.fontspace.com/timeline/2012