CSS loading fonts from internet

StackOverflow https://stackoverflow.com/questions/20879219

  •  23-09-2022
  •  | 
  •  

Question

I'm using foundation.min.css in my project. Every time I load the above in my HTML file, my browser tries to fetch the fonts online. But the strange part is that it works even if there's no internet access.

I need to know:

  1. How to disable foundation from fetching the fonts online?
  2. Why there's no change in functionality even if it gets loaded?

How to edit this to remove online fetching functionality without harming the original file? foundation.min.css code:

@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

HTML code:

<!doctype html>
<html ng-app ng-csp>
  <head>
    <link href="styles/foundation.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="libs/angular.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
  <style>
    body {
      padding: 10px;
      overflow: auto;
    }
  </style>
  </head>
<body>

<div>
        <div>
        <h3>Sample Application</h3>
        <input type="text" ng-model="name" placeholder="Your text here..">
        <h1>{{name}}</h1>
    </div>
<button>Submit</button>
<table>
    <tr><th>Name</th><th>Age as on 1/1/2014</th></tr>
    <tr><td>Sourabh Sharma</td><td>21</td></tr>
    <tr><td>Shourya Sharma</td><td>23</td></tr>
    <tr><td>Vinay Kumar</td><td>18</td></tr>
</table>
</div>


</body>
</html>
Was it helpful?

Solution

When your offline, removing the web-font import will not prevent the font from displaying if you have the font on your computer. It will only prevent the font from displaying if its viewed by someone who doesn't have the font installed.

If at some point you plan to use the fonts then leave the @import alone and just add an override that you can easily toggle on and off.

body { font-family:arial,sans-serif !important; }

If you only want to affect specific fonts and not the entire document then just search and replace in your editor of choose for the font-family declaration you want to replace.

OTHER TIPS

How to disable foundation from fetching the fonts online?

remove the following code from foundation.min.css (you've mentioned above)

@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

Why there's no change in functionality even if it gets loaded?

because it describes the required css locally

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top