Google Web Fonts - html

I'm planning to use Google web fonts on my site.
My site has lots of pages, but only a few CSS files.
-=> Is there any way to add this tag in the CSS file (because I don't want to edit all the HTML files)?
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
or do I need to add the above line in every HTML page's head section?

Yep, #import the google font in - jsfiddle example
Put this at the top of your CSS file
#import url('http://fonts.googleapis.com/css?family=Droid+Sans');
Then, reference it like normal
h1 { font-family: 'Droid Sans', arial, serif; font-size:24pt;}

Add the tags, how? Please explain yourself better.
In the HTML you can do this…
<style type="text/css" media="screen">
h1 { font-family: 'Droid Sans', arial, serif; }
</style>
If that's what you're asking?

Related

Linking an external stylesheet

I had everything working within style tags, but as soon as I cut and pasted what was in the style tags to a .css and linked it, the style stopped working. the only thing I can think of is that the file path is wrong. My html file and the style sheet are in the same directory.
Here is how I linked it (this doesn't work):
<head>
<title>Video Game Reviews</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
This does work though:
<head>
<style>
body {
background-color: rgb(255, 0, 255); /* this is the pink color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
</style>
</head>
that's the correct way to do it, however ensure that your file path matches. for your example above, the css file has to be in the same folder as the page you are working on and named correctly.
See that there are no HTML tags in your CSS file.
Check your console, are there any error regarding the css file? If yes, then try to use a full path for the css file
If no error in the console
check the Sources in console
navigate to external css link (<link rel="stylesheet" type="text/css" href="./mystyle.css">)
right click
open in new tab
Can the link be opened? If the link opened just fine without error and it display blank or not updated css file, then it's probably cached, try to change your link to <link rel="stylesheet" type="text/css" href="./mystyle.css?v=1.0"> (just add any query string that's never been used before to override the cached one)
Once you move your CSS to an external file, you need to remove the HTML tags. CSS has it's own formatting guide lines.
For example, for inline CSS (included in the HTML), you would do:
<html>
<head>
<title>Video Game Reviews</title>
<style>
body {
background-color: rgb(255, 0, 255);
color: black;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
}
</style>
</head>
<body...
But once you move the CSS to an external file, the HTML tags are removed. For example:
HTML file
<html>
<head>
<title>Video Game Reviews</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body...
CSS file called mystyle.css
body {
background-color: rgb(255, 0, 255);
color: black;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
}
There a few other things to check for.
If you are referencing mystyle.css like this ./mystyle.css, then the CSS file needs to be in the same folder or directory as the HTML file. That is what the ./ means.
If you store all your utility files (like CSS files) in a single location (something like /rc) you can use a full path like this:
<link rel="stylesheet" type="text/css" href="/rc/mystyle.css">
In this case, the / (no dot) means from the root directory of the website. But that is really a different question.
Your said , your html & css are in the same directory, but ./mystyle.css makes html search for a level up from the current directory.
Solution :-
Remove this(./)
Or
Move the css to a separate directory, say css.
So, now - css/mystyle.css

How to change rendered font of the navigator

I'm using ATOM and i tried to change the font family from google fonts of the body in my code but for something doesn't change.
First i doing this: href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" type="text/css"
ok theres like a couple of ways to import google fonts
1:
in html>head
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
then in css
body{
font-family: 'Roboto', sans-serif;
}
2:
in css file
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
then
then in css
body{
font-family: 'Roboto', sans-serif;
}

#font-face and #font-family not working

I am trying to make something really simple: add 3 fonts to an html page.
I have looked at tons of examples but none have solved my problem. Maybe I am lacking something in the way it is written. I am actually not sure.
My html:
<html>
<head>
<title>Fuentes</title>
<link type="text/css" rel="stylesheet" href="Fuentes.css">
</head>
<body>
<p class="a">This is a paragraph, shown in Roboto font.</p>
<p class="b">This is a paragraph, shown in Bellefair font.</p>
<p class="c">This is a paragraph, shown in the Kavivanar font.</p>
</body>
</html>
And my .css:
#font-face {
font-family: "Roboto";
src: url(https://fonts.google.com/specimen/Roboto) format("truetype");
}
#font-face {
font-family: "Bellefair";
src: url(https://fonts.google.com/specimen/Bellefair) format("truetype");
}
#font-face {
font-family: "Kavivanar";
src: url(https://fonts.google.com/specimen/Kavivanar) format("truetype");
}
p.a {
font-family: "Roboto", Roboto, sans-serif;
}
p.b {
font-family: "Bellefair", Bellefair, sans-serif;
}
p.c{
font-family: "Kavivanar", Kavivanar, sans-serif;
}
That's definitely not how to use Google fonts... You're not even linking to an actual font, you're linking to the support page.
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
First go to the page: https://fonts.google.com/specimen/Roboto
Then click this:
Then it will create a little box in the corner. Click that box, and you will see this. Now you have the actual code:
You should add stylesheet link in your html for each google font you want to use. eg
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
for roboto font in your html and then use font-family: 'Roboto', sans-serif;in your css.

Can't get google font to work

I have looked through other peoples answers to the question and followed the instructions on google and just cannot get it to work. Here is what I have used.
#import url('https://fonts.googleapis.com/css?family=Archivo+Black|Playfair+Display:400,700i,900');
The worst part is that Playfiar Display is working fine, Archivo is not at all.
For reference, georgialee.design is the URL. (works on every browser except for internet explorer)
Thank you so much! I'm sure it'll be some silly mistake :)
In header section you import it
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
or
<style>
#import url('https://fonts.googleapis.com/css?family=Archivo+Black');
</style>
In style.css file
body{
font-family: 'Archivo Black', sans-serif;
}
Copy this code into the < head > of your HTML document:
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
In your CSS file, use the following rule to set the font-family:
// if you only want to change h1 fonts, use this selector
h1 {
font-family: 'Archivo Black', sans-serif;
}
For example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<style>
// default font for everything in the body
body {
font-family: 'Playfair Display', serif;
}
// make all h1 Archivo
// note: if you want h2, h3 etc to be archivo as well you need to add the respective selector
body h1 {
font-family: 'Archivo Black', sans-serif;
}
</style>
</head>
<body>
<div>rest of your page...</div>
</body>
</html>
see more examples here
see here to find out more about css selectors

How do I add Opan Sans .tff using CSS?

I want to use the OpenSans-Light.tff webfont that I downloaded off of Google Fonts. Here is what I am trying within my main.css:
#font-face {
font-family:"OpenSans";
src: url("fonts/OpenSans-Light.ttf");
}
.banner h1 {
font-family: "OpanSans", arial;
}
Though it's not working.
If you want to use just #import use it like this:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
or add this to your HTML <head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
and then add this to your CSS
.banner h1{font-family: 'Open Sans', sans-serif;}
The easiest (and arguably best way to do it) is simply use #import in your CSS.
Here's a JSFiddle I made for you: http://jsfiddle.net/gLej4h82/
CSS:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
body {
font-family: 'Open Sans';
}
If you add
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
to the very top of your code in your css file and reference it on the certain object like the below it should work
.banner h1{
font-family:'Open Sans', sans serif;
font-weight: 400; /* 400 is regular, 300 is light, 700 is bold */
}
Use this service to generate the font face for you its very nice service.
http://www.fontsquirrel.com/tools/webfont-generator