CSS loading fonts from internet
Asked By: Shourya Sharma
Originally Asked On: 2014-01-02 08:45:18
Asked Via: stackoverflow
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:
- How to disable foundation from fetching the fonts online?
- 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>
He received 2 answers
eventually accepting:
davidcondrey’s answer to
CSS loading fonts from internet
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.
The answer with the highest score with 1 points was:
user3154142’s answer to
CSS loading fonts from internet
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
If the selected answer did not help you out, the other answers might!
All Answers For: CSS loading fonts from internet
user3154142’s answer to
CSS loading fonts from internet
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
davidcondrey’s answer to
CSS loading fonts from internet
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.
Of course, you should really check out the original question.
The post CSS loading fonts from internet [ANSWERED] appeared first on Tech ABC to XYZ.