Problems with #font-face - html

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.

Related

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)

Google Fonts in 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

Font Lato, bolded some Czech characters

I use the 'Lato' font on the website. The characters in Polish and English are displayed correctly, while some Czech characters are bolded. Below you can see that these 3 characters are bolded. What is the reason of this problem? Is this a font or browser problem?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900&subset=latin,latin-ext" rel="stylesheet">
<style>
body {
font: normal 15px 'Lato';
color: #000000;
font-weight: 300;
}
</style>
</head>
<body>
<div style="font-size: 30px;">Pověřenec pro ochranu osobních údajů</div>
</body>
</html>
Additonal printscreen
The glyphs are not available in Lato 1.0, which is also still used by Google Fonts.
Use Adobe Typekit, or download the font and include it on your website to fix the missing (bold) characters.
Font can be found here
Removing the font size from the body css works fine:
<html>
<head>
<title>TODO supply a title</title>
<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,100i,300,300i,400,400i,700,700i,900,900i&subset=latin-ext" rel="stylesheet">
<style>
body {
font: normal 'Lato';
color: #000000;
font-weight: 300;
}
</style>
</head>
<body>
<div style="font-size: 30px;">Pověřenec pro ochranu osobních údajů</div>
</body>
</html>

Web Fonts not showing up

For some reason, I can not get my fonts to appear on the page. I am opening this up from a static page on my computer. The html, css and fonts are all in the same folder. I have tried adding "./" and "/" in front of the the font location, but it did not work. The CSS file is loading. Thoughts?
font.css
#font-face {
font-family: 'American-Typewriter';
src: url('american-typewriter.eot');
src: url('american-typewriter.eot?#iefix') format('embedded-opentype'),
url('american-typewriter.woff2') format('woff2'),
url('american-typewriter.woff') format('woff'),
url('american-typewriter.ttf') format('truetype'),
url('american-typewriter.svg#american_typewriterregular') format('svg');
font-weight: normal;
font-style: normal;
}
.American-Typewriter {
font-family: 'American-Typewriter';
}
webpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font.css">
</head>
<body>
<h1 class='American-Typewriter'> American-Typewriter </h1>
</body>
</html>
I think this is a problem with addressing.
Try using only /
You need to first use code in your code in order to have standard HTML as below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font.css">
</head>
<body>
<h1 class='American-Typewriter'> American-Typewriter </h1>
</body>
</html>
Also you need to download the font if you still not able to see it from below link.
http://fontsgeek.com/fonts/American-Typewriter-Regular
If they're in the same folder, then you don't need anything before the filename!
/ is used when the object you're looking for is in a folder, and ../ is used when it's in the folder enclosing the current folder, e.g. the one the file is in.

Tried to import a local font but it's not working

so I'm trying to import a local font, but for some reason it's not being recognized, can I get some quick help on where I'm going wrong please?
I currently have 3 documents: index page, stylesheet.css and fonts.css.
I'm trying to use the font 'cinzel' however it's not working.
Index page:
<html>
<head>
<link rel="fonts" type="text/css" href="css/fonts/fonts.css"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet/stylesheet.css"/>
<style type="text/css">
</style>
<title>
RENTDrive
</title>
</head>
<body>
<h1> RENTDrive </h1>
<hr>
<h3> Lots of exotic cars to choose from</h3>
Book your vehicle now! <p> Terms and conditions apply</p>
</body>
stylesheet.css page:
h1 {
font-family: 'cinzel';
}
h3 {
font-family: 'cinzel';
}
And the fonts.css page:
#font-face {
font-family: 'cinzel';
src: url('css/fonts/Cinzel-Regular.otf') format('opentype'),
url('css/fonts/CinzelDecorative-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
Can you change the rel to stylesheet.
<link rel="stylesheet" type="text/css" href="css/fonts/fonts.css"/>
heading tag's default font-weight is bold(in user agent stylesheet).
so, you will remove font-weight: normal, you can see that