Font in h1 different when offline and online - html

Hello I am fairly new to HTML and CSS. I've just began hosting my site and since installing an SSL certificate to it (whether relevant or not) my header's font has reverted to the default font. When I open the html file offline the header is the appropriate 'Damion' font however when I go to domain that is not the case.
The website is eliasmalik.com, the text in question being "Under development"
Below is the index.html and main.css files for the website:
<!DOCTYPE html>
<html>
<head>
<title>Elias Malik</title>
<link rel="stylesheet" href="main.css">
<link href="tools/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<link rel="shortcut icon" href="diamond.ico">
</head>
<body>
<div class="bc">
<h1>Under development</h1>
</div>
<div id= "footer">
<div>
<ul class ="social">
<li class="facebook"></li>
<li class="instagram"></li>
<li class="linkedin"></li>
</ul>
</div>
</body>
</html>
and
html
{
background: url(devbc.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
.bc h1
{
font-family: 'Damion', cursive;
top: 40%;
left: 49%;
position:absolute;
transform: translateX(-40%) translateY(-49%);
color: white;
font-size: 62px;
}
#footer{
width: 105%;
}
ul
{
list-style-type: none;
}
ul.social
{
width: 202px;
margin: 555px auto 0;
height: 52px;
}
ul.social li{
float: left;
position: relative;
height: 52px;
margin-right: 12px;
}
ul.social li a{
display: block;
width: 52px;
height: 52px;
}
ul.social li.facebook
{
background-image: url(facebook.png);
}
ul.social li.instagram
{
background-image: url(instagram.png);
}
ul.social li.linkedin
{
background-image: url(linkedin.png);
}
This is a screenshot of how the page is supposed to display:
http://imgur.com/Xngv2Me
And yes the version in my file client is the same as the one offline

The font is http: not https:, so it will block it as being insecure.
Using Chrome, I went to your site, opened the dev tools (F12) and reloaded the page. The following error is displayed in the console.
Mixed Content: The page at 'https://eliasmalik.com/' was loaded over
HTTPS, but requested an insecure stylesheet
'http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion'.
This request has been blocked; the content must be served over HTTPS.
Change your link to the font from google to https and it should work.
Or, take the very sound advice (that I am remiss in forgetting) from hair raisin below:
better yet, skip the http/https and just use //fonts.googleapis.com to request the resource using the same protocol as the page

Change
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
to remove the http protocol so that it reads: //fonts.googleapis.com
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
Removing the protocol allows your files to request http when needed and automatically changes to https when secure files are needed.
Because you have a SSL you need to have all your references be secure. It was blocking non secure sources (your font) because you specified the font to be served over http and not https.

You might try changing this line:
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
To:
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
I suspect that your browser might be blocking the loading of that style because your page is https (secure), but you're requesting the CSS from an insecure source (http).
By leaving the http: off, you'll allow your page to request the CSS securely when your page is secure, and use plain http if the page uses http.

Your web browser is blocking the loading of mixed content - loading http resources on an https site.
https://developer.mozilla.org/en-US/docs/Security/MixedContent
an easy way to fix it is to change
http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion
to
https://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion

You can download the font and use css to "set" it, you'll be able to use it as a normal font after that.
#font-face {
font-family: yourfontname;
src: url(Yourfonturl.woff2);
}
And then to use it :
#yourid {font-family: yourfontname}

Related

Problem on my project. Getting 404 on my CSS file

In my HTML, I wrote
<link href ="project.css" rel ="stylesheet">
<style>
body, html {
height: 100%;
margin: 0;
}
</style>
<title>Page1</title>
</head>
<body>
<div class="bg"></div>
</body>
In my CSS, I wrote:
.bg {
/* The image used is edited from original World Table Tennis logo */
background-image: url("WTT.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
However, I'm not sure how to insert the image that I uploaded to my VS Code into my page, which is why I used CSS. Unfortunately, when I use Flask run, I get GET /project.css HTTP/1.0" 404.
I originally had my.bg on my HTML page, but I received GET /WTT.jpeg HTTP/1.1" 404. So I moved it to my CSS file. I haven't done the curse in a couple of months, so I'm a bit lost, especially when using images.
file structure
Befor
href ="project.css" rel ="stylesheet"
After
href="project.css" rel="stylesheet"
remove spaces on both sides and check

CSS present in the local environment, but not the server environment

I am having trouble with CSS showing up on my server environment. I've tried setting the href to /css/style.css and including the type="text/css" header, however nothing is working. The CSS shows up in the local environment just fine, and when I go to my website and visit the developer network tab, it shows an old version of the CSS. I am saving the document.
Header code:
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
CSS code:
body {
margin: 2vh;
margin-left: 6vh;
margin-right: 6vh;
font-family: Arial, sans-serif;
}
Any solutions are appreciated.

CSS Background image is only working in Chrome and no other browser

I'm building a new website and i have been testing my current code in multiple browsers where i have found the background images i placed in the header tag via css work in Chrome but no other browser. I would like the images to work across all browsers.
I have read through a few threads which cover the topic but none of the solutions work.
HTML
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<title>Bazaar Ceramics - Home</title>
</head>
<header>
<a class="logo" href="/Home.html"><span>logo</span></a>
</header>
<!--navigation, body and footer below-->
CSS
body, html{
min-height:100%;
min-width:100%;
}
header{
background: url(/Images/banner.jpg) no-repeat center 0;
background-size: cover;
margin-bottom: 0px;
position: relative;
height: 296px;
}
header a.logo {
position: absolute;
display: block;
width: 200px;
height: 136px;
background: url(/Images/logo.png) no-repeat 0 0;
background-size: contain;
z-index: 1;
top: 160px;
left: 50px;
}
header a.logo span {
display: none;
}
#media screen and (max-width: 750px) {
header a.logo { width: 150px; height 100px; }
nav { padding: 0px 0px 0px 10px; }
}
The Chrome browser shows the banner and logo correctly, when the browser size changes the images change size to match the browser size or nominated CSS size. i can hover my mouse over the logo and see the arrow change and it is selectable in all browsers.
Look at your css file. You're path is CSS/styles.css which is a relative file path.
For your images, you're using /Images/image.jpg which is an absolute file path.
If you use /Images on a hosting account online, it will go to whatever your root directory is which is what you intend. If you use /Images on your local device... it will go as far back to get to the root as you can go.
So if my computer structure is:
my-computer
-desktop
--my-project
---index.html
---Images
----image.jpg
---CSS
----styles.css
/Images is going all the way back to the my-computer folder and looking for it there. It wont find it there though.
What you want to do is ../Images to move back one level outside of the css folder and look for the images folder.

Custom CSS Cursor not working in some areas?

Alright, so I am trying to challenge myself in my html/css class by adding a custom cursor to all pages.
I have it working, but it seems to randomly stop being the custom cursor, and become the default instead?
The css I'm using for it:
* {
cursor: url("image.gif") 33 33, auto;
}
I have also tried using <span> for entire html documents, and that is not fixing it either for me.
I have also tried setting the cursor in
body{} and it didn't fix it.
Any help would be appreciated! I googled and searched the site for over 2 hours trying to find an answer that would work.
Posting the site below so you can see what I mean. (IE won't show the cursor, not sure about safari or opera yet)
http://www.rvertbleu.com/2014fa/dbrown/index.html
EDIT:
Made a shorter version of my index.html and my main.css that recreates the problem. Here it is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Gundam Base</title>
</head>
<body bgcolor="#000000">
<h1><center>Gundam Base</center></h1>
</body>
</html>
main.css
* {
cursor: url("gundam.gif") 33 33, auto;
}
body {
font-family: Impact;
font-size:1.5vw;
text-align: center;
color: #CC3300;
background-image:url('bg.jpg');
background-repeat:no-repeat;
background-size: cover;
position: relative;
top: 0;
left: 0;
z-index: -5000;
background-attachment: scroll
background-color: black;
}
add a div after the body tag with the following styles position: relative; width: 100%; min-height: 600px;cursor: url("gundam.gif"), auto;:
place all your other content in the above div. let me know if it works.

Google web fonts not rendered in IE8

I have looked at this: Google Web Fonts don't work in IE8, and this: How to make Google Fonts work in IE?. Neither works for me. The first suggests not to import too many fonts at once, while the latter is out of date since the bug was fixed back in 2010.
The HTML is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Google Fonts Test">
<link type='text/css' href='https://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet'>
<link type='text/css' href='https://fonts.googleapis.com/css?family=Play:700' rel='stylesheet'>
<link type='text/css' href='https://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet'>
<!--<link type='text/css' href='//fonts.googleapis.com/css?family=Lato:900' rel='stylesheet'>-->
<link type="text/css" href="https://static.mysite.com/blah/font-test.css" rel="stylesheet">
</head>
<body>
<div class="page-title">
This Is Title
</div>
<div class="page-content">
This is content
</div>
</body>
</html>
This is the corresponding CSS:
body {
height: 100%;
width: 960px;
min-height: 550px;
max-height: 1080px;
margin: 20px 60px 40px 20px;
padding-left: 10px;
padding-right: 10px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKklEQVQIW2OceOe1cb6K6FkGJAASYwTxkSVhbLAETBJEw3Tjl8BqFC7LAdSSJR3onNbEAAAAAElFTkSuQmCC) repeat;
}
.page-title {
height: 55px;
font: 38px "Play";
}
.page-content {
font: 16px "Cantarell";
width: 630px;
text-align: justify;
}
The above is tested in latest Chrome, which works fine. It however does not work in IE8 for some reason. Anything I am missing?
UPDATE: IE8 simply does NOT work with Google Fonts API. In fact, if I use IE8 to browse the specimen of many fonts on the Google Fonts API pages, none of them renders correctly. The only sure way to use these fonts is to convert them to EOT type (among with WOFF type), and serve them from your server, which is a shame because you cannot use Google's CDN anymore.
I'm confused by the other answers and comments so I'll just throw this out there. Whenever you use data uris, attributes or sets, you are venturing into an area IE does not fair well in by not supporting it or limiting it. Only modern browsers handle them correctly but I'm doing this from my phone and can't go into it any further. Checkout http://caniuse.com/#search=data
It’s not uncommon to have problems with some Google fonts on some browsers especially when used remotely (the way Google recommends). It often helps to download the fonts, generate the font files using e.g. FontSquirrel and then use them as uploaded onto your server.