How to avoid calling "fonts.googleapis.com/css?family=.." for my CSS files

Question

I am working on an asp.net mvc Intranet web application, and I am using a web layout template which I download from the web. Inside my CSS files there is the following line of code at the beginning of most of the CSS files (of course each CSS has a different font family name):-

@import url(https://fonts.googleapis.com/css?family=Shojumaru);

The problem I am facing is that in the case of users accessing the aspnet mvc intranet and they do not have access to the internet, this is causing the browser to keep trying to download the files from googleapis.com for around 10 seconds.

I am trying to provide these fonts inside my server, so that users will be served these files even if they do not have access to the internet.

Can anyone advise how I can add these fonts inside my asp.net mvc server, instead of retrieving these files from googleapis.com ?

Thanks

Answer 1

You can do it through JavaScript ( i would recommend this way ) using WebfontLoader (the same script that google fonts tell you to use). Through it you can even have a directive to try to get the font via Google Fonts and if it can't get the file in x seconds, use another path ( or do something else ).

And to give a basic answer, all you have to do is open all those googlefonts css links, copy their CSS files and font files (.svg, .woff., .utf., .ttf and .eot) , upload all those files to your host and make your css reffer to your localhost copies

EDIT
Reasons to preffer WebfontLoader over CSS @import

1. CSS is in the header, so it has to be loaded before the page html can be shown, JavaScript if put in the end of the HTML, just before closing the </body> tag are executed last
2. @import is not very much performance-wise
3. WebfontLoader have a function to do something while trying to load a font ( like showing another font or showing nothing ) and a function to do something if the font was not found ( like trying to load from another source or calling a js event )
4. WebfontLoader can load only some characters of a googlefont (useful if you want to just show a page header with some font). That way you avoid badwitdh problems and your page is faster

Answer 2

you can font-face in your stylesheet

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

}

h1{ font-family:'your-font', Arial, Helvetica, sans-serif;}

note :- pls add your fonts in your 'fonts' location ...