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


Tags: html,css,css3,razor

Problem :

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



Solution :

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

    CSS Howto..

    How to fix smooth text in IE?

    How to Style Unique CSS Navigation Menu

    CSS & Button: How to override native CSS of html buttons element?

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How To Outline a PNG (Transparent) image with CSS?

    how you can change the style of the page without changing CSS files?

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How to make my two sections vertically align, even when scaled, with different amounts of content?

    How to set style class to another class depends on selector?

    How to Add flexibility to SASS for another color

    How to split a div into multiple rows and columns in css?

    How to extend the background of a CSS-arrow to the whole page width?

    How do I make background-size work in IE8?

    How can I place two grid items above each other using Susy?

    How to cut down HTTP request on js/css in laravel

    How can I make make css transition happen when applying width through javascript

    How to reduce the number of sprites when using css sprite technique

    how to do css changes only to links that are in side specific div without defining classes to a elements

    How can I get horizontal overflows to work in CSS?

    How to make a visible rectangular frame in CSS to contain some sections of my view?

    How long can a webpage be?

    How to set the width of my table columns to a fixed value?

    jQuery, given a Variable with DIV with items, how to scroll an Item to the Left

    How to make the float left and float right on the same line?

    JavaFX 8 - How to change the color of the prompt text of a NOT editable combobox via CSS?

    How to make the first column of a table invisible?

    how to add css background color for div tag

    How to put a space in front of a next line [closed]

    How to realize a gradient like this with css

    How do I use pseudo-classes to select all children except first and last?