CSS loading fonts from internet - html

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>

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.

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

Related

CSS doesn't apply to class but does to the body element

I've experienced this problem multiple times and I haven't found any clear solution yet, so I was hoping you guys could help. I have simple index.php:
<?php
require('libraries/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/style.css">
<meta charset="UTF-8">
<title>Phantom 0.1 - Log In</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and style.css in libraries/styles.css:
.container {
background: url("/libraries/images/background.png") no-repeat fixed center;
}
the css works when I try to change, for instance, background color of the body element, but whenever I try to change anything from the .container (or pretty much any other class/id element) the changes won't show.
I've tried it on multiple browsers, cleared the cache and css validator (just in case) but no luck there.
Seems like the problem might be not setting the width/height of the picture. You should also add a ?> on the end in the PHP document in libraries.
First look//Sometimes requiring another file using PHP can lead to the of that file instead. When you run the website localy or online, do inspect element and check if your CSS document line is in the head. https://gyazo.com/fe8f2282e6686d432f75ff994e65c0f7
Also try going into sources when inspecting and check if all the lines are there, there might be a log made if you use Chrome. Do CTRL F5 to load everything over again.

Can we have a common file having the script for background image so that all the webpages can be linked to that?

Is it possible to have a common code file in HTML? For instance we are creating some web pages using HTML and need to set a common background. But after it is specified it is too tiresome to change it in every page. It would be quick if they all shared a script to a common file having the code for background color. The following code's location will be shared by all other web pages. So is this possible?
<html>
<style>
body
{
background-image:url("Brown_wall.jpg");
}
</style>
</html>
Create a CSS file with your background image and link it to your html. This will work for every file in the current directory. Anything above or below will need to be modified just a tad.
The link tag is what you're looking for. This article on MDN goes over the specifics of adding stylesheets to your HTML where you would only have to change that one file to see the change reflected in every page that includes it. It also makes your HTML files shorter and less redundant! Here's an example. You'd save these files in the same directory.
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello <span>world</span>!</p>
</body>
</html>
style.css
p span {
color: green;
}

Downloading Google fonts to run it locally

I am currently creating a HTML document from scratch. I am using MAMP to host the site however when I link to a google font it doesn't work.
When I download it do I link it to my css file? and if so how do I call it?
Thanks
Its better to customize the font in your site, and for customization you need to download fonts in four formats (webfont.eot, webfonts.svg, webfonts.woff, webfonts.ttf) and then use them from CSS. Follow this url:
https://css-tricks.com/snippets/css/using-font-face/
Check this example for how to use online fonts.
<html>
<head>
<style>
#font-face{
font-family:fontName;
src:url(https://fonts.gstatic.com/s/varelaround/v6/APH4jr0uSos5wiut5cpjrugdm0LZdjqr5-oayXSOefg.woff2)
}
body{
font-family:fontName;
font-size:2em;
text-align:center;
}
</style>
</head>
<body>
<h1>Title</h1>
</body>
</html>
Rather than downloading them and serving them 'locally' I'd suggest to check what the error might be and use the fonts delivered via Google API. They provide a getting started guide, so you can start with a basic example like the following and work your way up to what you need:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
.fancy {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
Example for using
<span class="fancy">Tangerine</span>
</body>
</html>
You can also browse all available fonts here and let google generate a custom <link rel="stylesheet" ...> tag for you which serves only what you explicitly specified.

New css definition doesn't get applied from linked stylesheet

In the head of the document:
<link type="text/css" rel="stylesheet" href="css/resources/css/lessons-matching-test.css"/>
In the body of the document
<div class="tests">
Link
</div>
In the linked css stylesheet I added this new style
.tests
{
background-color: blue;
/* some stuff */
}
Why isn't my style being applied when I add class=tests to my div?
When I create a new HTML-file and insert your code (without the external css and js files) I get the expectated result.
<!DOCTYPE html>
<html lang="en"><!-- Forgot the quotes -->
<head>
<meta class="metatype" content="matching-test">
<meta charset="UTF-8">
<style type="text/css">
.tests
{
background-color: blue;
/* some stuff */
}
</style>
</head>
<body>
<div class="tests">
Link
</div>
</body>
</html>
What happens when you exclude the js files and/or the css file?
Two cases
your lessons.js is doing something with .tests
<script type="text/javascript" src="js/resources/js/libs/lessons.js"></script>
Your css set .tests as important so that you cannot change
<link type="text/css" rel="stylesheet" href="css/resources/css/lessons-matching-test.css"/>
The problem is that your old styles are being used due to caching. Your new styles do not show up because the browser is using the old styles. There are a couple ways to go about fixing or changing this.
The technique for avoiding that is called "cache busting". When a server side handler is involved this can be handled in a higher language. But if there is no access to one, then usually version names are used.
lessons-matching-test-v1.css
Naming your css file this way every time you make a change will allow that new version to be used and cached. Ever version, you would increment the number, so version 2 would be lessons-matching-test-v2.css.
Another approach is to attach a query string to the path every time you make a new version
href="css/resources/css/lessons-matching-test.css?v=1.0"
and then every time you make a new version, change the query string, so version 2 would be href="css/resources/css/lessons-matching-test.css?v=2.0"

external CSS issue

Okay, time for my dumb question of the day.
I have an external css file that basically assign a background image to a button.
Css Code:
input.keypad
{
cursor: pointer;
display: block;
min-width: 64px;
width: 64px;
height: 64px;
margin: 0;
border: 0;
background: url(images/btn1.jpg) no-repeat center top;
}
Html code:
<input class="keypad" type="button" name="btnClickMe" id="btnClickMe" value="Click Me">
My dilema is that the first time I load the page it works 100%, but when I refresh it, it seems to ignore the width and height set in the css file. The image is is in the background, but cut off because of this.
I thought it might be some sort of caching so I included pragma tags which did not help at all. Any ideas?
Use Firebug to find the reason. It will help you to see which css properties are applied to the element and so on.
You select the element and you will see all css properties of it.
(source: getfirebug.com)
You have to learn that there are many useful tools out there which can help you solve many of your problems :) Especially Firebug. It is a must-have tool.
Here's some suggestions...
First, do all your page refreshes with Ctrl+F5 in Firefox to override browser cache each time.
Second, check that the button doesn't have a parent element somewhere in the CSS overriding it, such as "form.myForm input { ... }".
Third, instead of declaring the button background in the CSS, move that declaration into your HTML like this:
<input type="image" class="keypad" src="images/btn1.jpg"/>
... whilst keeping the size declarations in CSS as they are now.
See if some of those might help.
Firstly I'd like to thank Balon for pointing me in the right direction.
After using the browser add on he suggested and viewing the html source, I noticed that my <link tag pointing to the external css file was being placed within the <body of the html which I found very odd. Upon reviewing my html code, I saw that my <link tag was infact in the <head> tag, but was below the <script tag, which after swapping the tags around, the code now works 100%.
Here is an example of what I am trying to put across:
Code Before (Broken):
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
Code After (Fixed):
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>