fonts changing from http to https - html

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).

Related

My css and html code is acting very strange

my code is acting super strange, first, i cant get css to work.
randomly in my code there was lines that were grayed out like if it was a comment but there was no comments, i pressed the spacebar after each end of line and it went back to normal, pretty strange.
then whenever i tries to give css properties and classes, it wouldnt give them. i just reopened my computer and last time it worked perfectly fine.
i gave the right link to the css stylesheet in html, ive checked.
here is just one example :
home.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="homestyle.css"
media="screen" />
</head>
(... more code)
<h1 class="lorem">hello</h1>
stylesheet.css
body {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
(... more code)
.lorem{
color: white;
background-color: aqua;
}
(... more code)
Change
<link rel="stylesheet" type="text/css" href="homestyle.css"
media="screen" />
by
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
because the file called stylesheet.css and you call homestyle.css, Or just rename your css file to homestyle.css .

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

Github pages not loading W3.CSS?

I am trying to create a github page using the css stylesheet from W3.CSS.
However, when I try to load the page, it seems like no CSS stylesheet is loaded. I did not found an answer here on stackoverflow or anywhere else
Maybe I am doing something wrong, but I don't know what.
Here is the beggining of my index.html file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
.w3-sidenav a,.w3-sidenav h4 {padding: 12px;}
.w3-navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
</style>
<title>Amérique du Sud</title>
</head>
And here is the page in question
If you look in the browser console you'll see an error
Mixed Content: The page at 'https://laurenthayez.github.io/#Argentine' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.w3schools.com/lib/w3.css'. This request has been blocked; the content must be served over HTTPS.
That means that since your site is https://, it will not load resources that are served over http:// for security reasons.
The solution is to use https://www.w3schools.com/... for your assets instead of http://www.w3schools.com/.... Or you can just use //www.w3schools.com/... and that will request the asset from the site using the same protocol as your site. Or in other words, if your website is http://, it will request http://, or if your website is https://, it will request https://
So change your link tags to
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
or
<link rel="stylesheet" href="//www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="//www.w3schools.com/lib/w3-theme-black.css">

Google Chrome won't load two CSS files

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 '' */
}