Why is #font-face not working in this code snippet? - html

When I try to use font-face it just does nothing, it doesn't change the font. Why is it not working?
Here is my HTML CODE
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="schriftarten.css">
</head>
<body>
<span id="span1">Hallo Welt</span>
</body>
</html>
Here is my CSS Code:
#font-face {
font-family: "Test";
src: url("Anton-Regular.ttf") format("ttf");
font-style:normal;
}
#span1{
background-color:orange;
font-size:30px;
font-family:Test;
}
What am i doing wrong? I'm using Chrome Version 84.0.4147.135 (Offizieller Build) (64-Bit)

You need to use all types of font for matching all browsers standards here is an example to give you the idea about your css code:
#font-face{
font-family:YOUR_FONT_NAME;
src:url('YOUR_FONT_NAME.eot');
src:url('YOUR_FONT_NAME.eot?#iefix') format('embedded-opentype'),url('YOUR_FONT_NAME.woff') format('woff'),url('YOUR_FONT_NAME.ttf') format('truetype'),url('YOUR_FONT_NAME.svg#weberdsBold') format('svg');
}

I just found the solution.
The error was the format("ttf")
when i removed it, it was fine

Related

incorrect character rendered in chrome

The HTML is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
h1 {
font-family: 'Open sans',sans-serif;
font-weight: 300;
}
</style>
</head>
<body>
<h1>
Tām rō̜i ʻĀthit ʻUthai Rātsadō̜n</h1>
</body>
</html>
The bottom is Firefox 103.0.2 and top is Chrome 104.0.5112.79. (Running macOS Monterey 12.5)
When I change the font-weight from 300 to 400 (or more), Chrome starts displaying everything correctly. Not sure what the issue is.
Rendered Fonts section of Chrome (right) and Firefox (left).
There is a possibility that your language is not supported with utf-8 encoding, so check this out here: https://www.ibm.com/docs/en/aix/7.2?topic=globalization-supported-languages-locales.
also: better to import your data via url() as string, I mean replace
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
with
#import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700");

Why is my custom font not displayed (HTML, CSS, BEGINNER)

<html>
<head>
<title>innomotion media</title>
<style type="text/css" media="screen, print">
#font-face {
font-family: "Baiti";
src: url(fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
</style>
</head>
<body>
This is Baiti
</body>
</html>
As a long time coder, I have always dodged HTML or CSS. But it is time I need a webpage. Basic syntax is clear to me, however I already stumbled across using my custom font.
The html file is located on my drive. Next to it is a local folder called "fonts". I thought I had referenced that folder correctly and by opening the webpage, the font "Baiti" is used.
But it isnt. It displayed some def. times new roman or something.
What is it I am doing wrong?
<html>
<head>
<title>innomotion media</title>
<style type="text/css" media="screen, print">
#font-face {
font-family: "Baiti";
src: url(fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
</style>
</head>
<body>
This is Baiti
</body>
</html>
src: url("./fonts/baiti.ttf");
Also make sure that the Font Family matches the name when you preview the font. and also the type if you are using woff or woff2
like,
src: url("./fonts/baiti.woff");
src: url("./fonts/baiti.woff2");

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.

CSS #font-face not working, default font shown

I am trying to use a custom font on my webpage, but it isn't working. Any idea why?
#font-face {
font-family: 'raleway';
src: url("Raleway-Regular.tff") format("truetype");
}
.logoarea {
float: left;
}
.logo {
width: 120px;
height: 74px;
}
.topnavbar {
font-family: 'raleway';
}
That is my css code. I have already checked to make sure the spelling of the file is correct. the css and my font are in the same directory.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<!-- TEMP - AUTO REFRESH -->
<meta http-equiv="refresh" content="2" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>OJMari</title>
</head>
<body>
<div class="logoarea">
<img src="images/logo.png" alt="OJMari Logo" class="logo" />
</div>
<div class="topnavbar">
test
</div>
</body>
</html>
That is my html code. I don't see anything wrong with it.
I have already validated both of these, so does anyone know why this is happening? For those who are curious, this is what my html output on Google Chrome 59 looks like. HTML Output
It seem the font type is incorrect format. Please change font extension to .ttf
#font-face {
font-family: 'raleway';
src: url("Raleway-Regular.ttf") format("truetype");
}
The issue is that different browser will need different font files format, see: https://help.webflow.com/article/list-of-font-file-types-for-maximum-browser-support
Not sure if you use sass but this should give you an idea of what I mean:
https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6

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.