Geek Answers Handbook

The font in h1 is different when offline and online

Hello, I'm pretty new to HTML and CSS. I just started to host my site and, starting from the installation of the SSL certificate (regardless of whether this applies or not), my header font returned the default font. When I open the html file offline, the header is a suitable "Damion" font, however when I go to the domain it is not.

Website - eliasmalik.com, text under the question "Under construction"

The following are 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"><a href="https://www.facebook.com/elias.malik.7"></a></li>
                        <li class="instagram"><a href="https://instagram.com/eliasrmalik"></a></li>
                        <li class="linkedin"><a href="https://uk.linkedin.com/in/eliasrmalik"></a></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 should be displayed: http://imgur.com/Xngv2Me

And yes, the version in my file client is the same as offline

+4
5

http: not https:, .

Chrome, , (F12) . .

: 'https://eliasmalik.com/' HTTPS, 'http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion'. ; HTTPS.

google https, .

, ( ) :

, http/https //fonts.googleapis.com, , ,

+3

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>

http, : //fonts.googleapis.com

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>

HTTP https, .

SSL, . ( ), , http, https.

+1

:

<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'>

, , https (secure), CSS (http).

http: off, CSS, , http, http.

0
source

Your web browser blocks the loading of mixed content - downloading HTTP resources to the https website.

https://developer.mozilla.org/en-US/docs/Security/MixedContent

an easy way to fix this 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

0
source

You can download the font and use css to “install” it, after which you can use it as a regular font.

@font-face {
font-family: yourfontname;
src: url(Yourfonturl.woff2);
}

And then use it:

#yourid {font-family: yourfontname}
0
source

More articles:


All Articles