Here's how I tried to include a font in my HTML project:
#font-face {
font-family: 'Commodore';
url('Commodore-64-v6.3.ttf') format('truetype');
}
p {
font-family: Commodore;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font Family Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
The specified ttf font is in the same directory as the CSS and HTML files, but is not used? Instead it's using some Times -like font. Why?
You are not using the right syntax of #font-face Try below
#font-face {
font-family: 'Commodore';
src: url('Commodore-64-v6.3.ttf') format('truetype');
}
p {
font-family: Commodore;
}
You can read more about #font-face here
Try adding src: before url like this
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('../fonts/font.ttf'); /*URL to font*/
}
Also, put your font in the "fonts" folder.
The best and most convenient way of including fonts is via the Google Fonts API as follows:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Just apply this font via:
P {
font-family: 'Roboto', sans-serif;
}
Related
I've gone over the posts related to this question (here, here and here) and tried various things. However, I'm still getting the warnings on Windows 10 in Firefox and Firefox Developer Edition (but in neither Edge, nor Chrome).
The warnings I get are per font variant, and occur after about 10 seconds:
The resource at “(url)/test/roboto-light-webfont.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
The resource at “(url)/test/roboto-regular-webfont.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
The resource at “(url)/test/roboto-medium-webfont.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
I'm self-hosting the Google font "Robot" on a test web page.
The folder structure and markup/css are very simple:
test/
index.html
roboto.css
roboto-light-webfont.woff
roboto-light-webfont.woff2
roboto-regular-webfont.woff2
roboto-regular-webfont.woff
roboto-medium-webfont.woff2
roboto-medium-webfont.woff
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="preload"
href="roboto-light-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="roboto-regular-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="roboto-medium-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Roboto</title>
<link rel="stylesheet" href="roboto.css" />
</head>
<body>
<h1>Roboto (medium: 500)</h1>
<ul>
<li>Roboto (regular: 400)</li>
</ul>
<p>Roboto (light: 300)</p>
</body>
</html>
CSS:
#font-face {
font-family: "Roboto";
font-weight: 300;
src: url("roboto-light-webfont.woff2") format("woff2"), url("roboto-light-webfont.woff") format("woff");
}
/** Regular: 400 **/
#font-face {
font-family: "Roboto";
font-weight: 400;
src: url("roboto-regular-webfont.woff2") format("woff2"), url("roboto-regular-webfont.woff") format("woff");
}
/** Medium: 500 **/
#font-face {
font-family: "Roboto";
font-weight: 500;
src: url("roboto-medium-webfont.woff2") format("woff2"), url("roboto-medium-webfont.woff") format("woff");
}
h1 {
font-family: "Roboto", serif;
font-weight: 500;
}
li {
font-family: "Roboto", serif;
font-weight: 400;
}
p {
font-family: "Roboto", serif;
font-weight: 300;
}
Ernesto in this post suggested that adding link rel="stylesheet", etc after each preload would eliminate the warning:
<link
rel="preload"
href="roboto-light-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="roboto-light-webfont.woff2"
type="font/woff2"
/>
<link
rel="preload"
href="roboto-regular-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="roboto-regular-webfont.woff2"
type="font/woff2"
/>
<link
rel="preload"
href="roboto-medium-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="roboto-medium-webfont.woff2"
type="font/woff2"
/>
But I got the same warnings.
Can anyone see any problems with the way I'm preloading the fonts?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="font-family: 'Noto Sans', sans-serif;"">Test</h1>
<h1 style="font-family: 'Roboto', sans-serif;">Test</h1></h2>
</body>
</html>
CSS:
<style>
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto:wght#700&display=swap');
</style>
I'm trying to import this font, however for both and , the font doesn't show up. How do I fix this?
There is an extra quotation mark in your code.
Replace
<h1 style="font-family: 'Noto Sans', sans-serif;"">Test</h1>
With
<h1 style="font-family: 'Noto Sans', sans-serif;">Test</h1>
I would, however, not write inline CSS to style my fonts because of readability and ease of maintenance.
Try this instead,
In your HTML file, do this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="header-style-1">Test</h1>
<h1 style="header-style-2">Test</h1></h2>
</body>
</html>
In a separate CSS file (in this case, style.css), do this.
.header-style-1 {
font-family: 'Noto Sans', sans-serif;
}
.header-style-2 {
font-family: 'Roboto', sans-serif;
}
First You Should remove '"'
<h1 style="font-family: 'Noto Sans', sans-serif;"">Test</h1>
change this
<h1 style="font-family: 'Noto Sans', sans-serif;">Test</h1>
next you can help this-->https://www.w3docs.com/snippets/css/how-to-import-google-fonts-in-css-file.html#:~:text=Open%20Google%20Fonts%20and%20follow,(in%20HTML%20or%20CSS).
In the head of your html file, write this line
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto:wght#700&display=swap"
rel="stylesheet"
/>
you can use below code for fix error
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
<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");
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.
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