change the font in mobile site using bootstrap

Question

I am using bootstrap3.3.4 in visual studio 2013 to create a new webform application, and I deleted the Site.Mobile.Master file, to make sure my application is using the Site.Master only. I also updated the site.css to have new webfont style. i.e. Roboto, Raleway...

@import url(http://fonts.googleapis.com/css?family=Roboto:500,300,400);
@import url(http://fonts.googleapis.com/css?family=Raleway:500,400,300);

.lightFont {
    font-family:"Raleway";
    font-weight:300;
}

Let we say I have 2 h2 tags, where one of them is having the lightFont class:

<h2>Default header</h2> 
<h2 class="lightFont>Light Font header</h2> 

I open the page on the computer browser, and everything was perfect. one normal header, and one light header

My Problem is when I tried it from my mobile, the font remains the same for both headers regardless of the style. It looks like there is a special place to change the font for mobiles.

So, is there any idea on where to define the font to be used on the mobile?

Answer 1

After lot of search and tests, I found that the following declaration will solve the problem. I don't have any justification or reason why the previous declaration didn't work, but the following is working on multiple devices.

First, you must have the font files in your application; in my case I put them in a folder called "fonts".

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway_thin-webfont.eot');
    src: url('../fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/raleway_thin-webfont.woff') format('woff'), 
        url('../fonts/raleway_thin-webfont.ttf') format('truetype'), 
        url('../fonts/raleway_thin-webfont.svg#webfontnF3kUzPR') format('svg');
    font-style: normal;
}

Now, you may ask why I repeat the 'src' property for the 'eot' extension. well, I just copy the declaration of the glyphicons font from the template created by visual studio 2013 (bootstrap.css). so I just follow it blindly.