Google Fonts in HTML - html

I am trying to use Londrina Shadow from Google fonts in my HTML code. I have typed this in the in HTML: <link href="https://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap" rel="stylesheet">
The ampersand is blocked out and the link does not appear to be working.
I have typed this in CSS: font-family: 'Londrina Shadow', cursive;
It does appear to be working.
What is my problem?

use it like that
<!DOCTYPE html >
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="font-family: 'Londrina Shadow'">Checking</h1>
</body>
</html>
you are using it in a wrong way

Related

external CSS, test on local computer, css file not found

I just started to implement a website. I have no host yet. First I would like to try some things locally on my own laptop.
I would like to use external css.
A simple version of the index file to show the problem looks like:
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
The test.css looks like this:
<style>
h1 {
color: red;
}
</style>
The problem is that the html file does not find the css file (the header will be black instead of red) although they are located in the same directory. I tried some variants but it did not help.
If I add the same css code inline, then it works.
This should be very easy, but I fail to see why the html file does not find the external file.
I tried this on firefox and IE.
Hope somebody could help me.
you missed open html tag
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
remove style from your css file
h1 {
color: red;
}

HTML won't load linked CSS

I've been trying to learn HTML and have been following a tutorial online.(https://www.w3schools.com/html/html_css.asp) the tutorial does have some misinformation, so I've been looking on here for help as well. I have reached the point where you use external CSS files rather than using the <style> function.
My code is in /HTML/[ProjectName]/project.html, while my CSS is in /HTML/[ProjectName]/CSS/styles.css. Below are both files;
body {
background-color: powderblue;
}
h1 {
color: red;
}
p1 {
font-size: 200%;
}
<!DOCTYPE html>
<html>
<title> Linked CSS </title>
<head>
<link rel="style" type="text/css" href="/CSS/styles.css">
</head>
<body>
<h1> The CSS is in a separate doc </h1>
<p1> Let's see how this works out </p1>
<a href="/CSS/Styles.css" target="_blank">
<p2> Link to CSS file </p2>
</a>
</body>
</html>
From what I've read the css is properly linked to my file, and when I open the link it opens to the css page. What am I doing wrong?
Make sure you update your code to match your correct filename.
If your CSS is stored in the /HTML/[ProjectName]/CSS/style.css, then you should it like this
<link rel="stylesheet" type="text/css" href="CSS/style.css">
Try writing <link rel="stylesheet" type="text/css" href="CSS\styles.css">and check the spelling of your CSS file because they are different in question and in your code.
It`s easy. Take it
link rel='stylesheet' type='text/css' href='CSS/style.css'
and read W3School

padding and colour not applying to body class

I have been trying to apply padding and colour to my body element and it is not applying.
I have been on this and it is not working. I am using live server for my work though, I will apply my code below for review. both the css and the html. it should also be noted that I am using SASS. Thanks
body {
font-family: 'lato', sans-serif;
font-weight: 400;
//font-size: 16px;
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<title>A7A ASSOCIATES LTD</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="img/A7A Logo.png" alt="logo" class="header__logo">
</div>
<nav></nav>
</header>
</body>
</html>
Why would you place those CSS rules after the HTML closing tag ?
anyway, here are few solutions:
put the CSS style inside css/style.css file and it shall work.
make sure the path to the CSS file is correct.
clear the browser cache and try again (CTRL+F5 for Firefox, Shift+F5 for chrome)

Problems with #font-face

So my problem is that the fonts used in my nav bar simply won't change and I cannot see the problem with my CSS, please help!
CSS
//Fonts
#font-face {
font-family: navfont;
src: url(fonts/Franchise-Free-Bold.otf);
}
HTML
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<title>Frost</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<!--navigation panel-->
<nav id="nav">
<br>
<p class="navfield"> Home Frost Systems </p>
<br>
<a name="systems"></a></nav>
</body>
</html>
The problem with your CSS code is that "navfont" was not in apostrophes or quotation marks so therefore, it was being treated as a value rather than a string. Furthermore, the URL you provided isn't surrounded with the apostrophes/quotations and was also not counted as a string.
As well, you need to declare the font being used for "nav" to correctly display the font.
CSS
#font-face {
font-family: 'navfont';
src: url('fonts/Franchise-Free-Bold.otf');
}
nav{
font-family: 'navfont';
}
An example is located at JSFiddle.

I can't use CSS code in HTML doc?

I am super new to HTML and CSS and I ran into a problem when I try to link CSS code in HTML. The code doesn't show the background color like it should. HTML Code:
<!doctype html>
<html>
<body>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
<body>
</html>
CSS code:
body {
background: #999;
}
I have them both in the same folder. I am lost and confused so any help would be greatly appreciated!
CSS files should be included in the head section. If you have them in the same folder you need to change the href aswell.
<!doctype html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<body>
</html>
You have to use href="main.css"
By using styles/ the browser searches for a folder called styles in the same folders and can't find it so no CSS will be applied
Try adding the link element to head tag instead of body tag.