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
Related
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
<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");
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
I just started creating a personal website for me, then I came across a problem. As soon as I include two stylesheets, the second stylesheet doesn't load (doesn't render). My first stylesheet that does load (does render) looks like this:
#font-face {
font-family: 'archive';
src: url('archive-webfont.eot');
src: url('archive-webfont.eot?#iefix') format('embedded-opentype'),
url('archive-webfont.woff2') format('woff2'),
url('archive-webfont.woff') format('woff'),
url('archive-webfont.ttf') format('truetype'),
url('archive-webfont.svg#archive') format('svg');
font-weight: normal;
font-style: normal;
}
The second stylesheet that doesn't load (doesn't render) looks like this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #FFFFFF;
background: #333333;
}
h1 {
margin: 0;
font-family: archive;
}
My HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Jacques Marais</title>
<link rel="stylesheet" href="fonts/archive.css" title="Archive Font CSS" />
<link rel="stylesheet" href="css/master.css" title="Master CSS" />
</head>
<body>
<h1><span class="first-character">J</span>acques Marais</h1>
</body>
</html>
When I look at the Resources panel in the Developer Tools, it shows both stylesheets, but when I look at the Sources panel, it only shows that one loaded:
Sources
Resources
I tried all methods mentioned here and here.
Update
Here are the Network and Console panes.
Update 2
Update 3
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Jacques Marais</title>
<link rel="stylesheet" href="fonts/archive.css" />
<link rel="stylesheet" href="css/master.css" />
</head>
<body>
<h1><span class="first-character">J</span>acques Marais</h1>
</body>
</html>
I just deleted the title attribute inside your link tag and it works. (I've tested it on my webserver)
No title attribute inside <link> tag.
http://www.w3schools.com/tags/tag_link.asp
Ops, never mind, it supports global attribute (included title), anyway if you delete them the page works... I've noticed also it works if you leave title attributes but without spaces inside them.
Try to change your titles and delete all the spaces.
I am not sure is it really work or not. I have faced this same problem and found solution. At the second stylesheet do like this -
h1 {
margin: 0;
font-family: 'archive'; /* add your font-family name inside '' */
}
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.