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 '' */
}
Related
so i just activated ssl for my website and i noticed that the font changed. It went from League Sparton Bold to something slightly different. It is not exactly what i desire. Here is what i wrote in css
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://allfont.net/allfont.css?fonts=league-spartan" rel="stylesheet" type="text/css" /><head>
<script src="jquery-3.5.1.min.js"></script>
</head>
<style>
body,h1,h2,h3,h4,h5,h6 { font-family: 'League Spartan Bold', arial; }
body, html {
height: 100%;
color: #777;
line-height: 1.8;
min-width: 100%;
}
</style>
here is what it looks like with http, which is also what i want for https:
and this is what it looks like in https,
The problem comes from the CSS file which has been linked to by
<link href="https://allfont.net/allfont.css?fonts=league-spartan" rel="stylesheet" type="text/css" />
Although the actual linking is requested using https, if you look within the file you will see it has:
#font-face{font-family:league spartan bold;font-style:normal;font-weight:700;src:local('League Spartan Bold'),local('LeagueSpartan-Bold'),url(http://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.woff) format('woff'),url(http://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.ttf) format('truetype')}
and so if the font isn't local, it tries to get it from allfont.de but with http
One way of getting over this problem would be to put this code direct into style in your header, altering the two http to https so you aren't dependent on allfont's text.
#font-face{font-family:league spartan bold;font-style:normal;font-weight:700;src:local('League Spartan Bold'),local('LeagueSpartan-Bold'),url(https://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.woff) format('woff'),url(https://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.ttf) format('truetype')}
Embed or import the font from somewhere you can also download the font then use #font-face to import it in your site like this:
#font-face {
font-family: 'League Spartan Bold'; // You can use any name
src: url(fonts/thefont.ttf) format('TTF') // The path of the font file
// You can use many formats like TTF, OTF, WOFF
}
So, by this way you can host your own font and don't need to be depended on a third party service (which can be down any time).
I am having issues will bold text when using bootstrap. Text that should be bold is not displayed as bold in Chrome:
However in Safari it works as expected:
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<meta charset="utf-8">
<title>Font check</title>
<!-- Comment out the bootstrap stylesheet and it works -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" href="font-test.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <h1 class="font-weight-bold">Hello World!</h1> -->
<span class="bold-text">Hello World!</span>
CSS:
* {-webkit-font-smoothing: antialiased;}
.bold-text {
font-weight: 700;
font-size: 2.5em;
}
codepen: https://codepen.io/Kexarif/pen/rNOZMqO
It was suggested that I needed to add -webkit-font-smoothing: antialiased but that makes no difference.
If I comment out the Bootstrap stylesheet the text is displayed correctly in Chrome. So it seems to be because of the Bootstrap. Any ideas why this might be happening and what I can do to fix it?
try Clear browsing data, one day it's work for me
The issue is actually a Chrome bug. It causes some of the system stack fonts to not display bold text correctly. It will be a few weeks until there is a fix, source: https://css-tricks.com/chrome-system-fonts-snafu
For now a temp fix is:
body {
font-family: -apple-system, Helvetica;
}
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
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