CODEWITHSUNDEEP
htmlcssfont-familygoogle-fonts
JKK
JKK

Reputation: 119

Google Fonts, robot sans-serif do not work

Although I put the links of font-awesome and google fonts, the fonts on the website does not change. I do not know how to fix it. Does anyone know what causes this problem?

contact.php

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
 <head>
    <title>American Website Design &amp; Development Agency - JOEY NAMIKI DESIGN</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/contact.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
<body>
<section class="contactSection">
                <h1>Please tell me what kind of design you want to get?</h1>
                <div class="contactForm">
                     <div class="tweet">
                      <h1>We listen all clients</h1>
                      <p>If you have any concerns regards to web, marketing, branding, design and redesign, feel free to ask me. I will give you the estimation.</p>
                      </div>
                      <form method="post" action="send.php"  id="content">
                            <div>*Name<input type="text" name="name" required></div>
                            <div>Company Name<input type="text" name="company"></div>
                            <div>*Phone Number<input type="text" name="phone"  required></div>
                            <div>*Email<input type="text" name="email"  required></div>
                          <div>*Message<textarea type="text" name="message" ></textarea></div>
                        <div><input type="submit" class="send"   value="submit"></div>
                      </form>
                </div>
          </section>
</body>
</html>

contact.css

@media only screen and (max-width: 2592px) {
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    background: black;
    overflow-x: hidden;
    color: cornsilk;
    font-family: 'Roboto', sans-serif, 'PT Sans'sans-serif, Helvetica sans-serif;
    font-size: 16px;
    line-height: 160%;
}
button {
    text-transform: uppercase;
    font-weight: bold;
}
a {
    font-size: 18px;
    text-decoration: none;
}
h1 {
    font-size: 42px;
    font-weight: bold;
    line-height: 120%;
    font-family: 'Roboto', sans-serif, 'PT Sans'sans-serif, Helvetica sans-serif;
}
p {
  font-size: 17px;
  line-height: 1.4;
}
}

Upvotes: 0

Views: 1035

Answers (1)

ksilentstorm
ksilentstorm

Reputation: 105

Try this

font-family: 'Roboto', 'PT Sans', 'Helvetica', sans-serif;

The line states that the first priority is given to Roboto, somehow if that font is not found, PT Sans will be applied. On the third priority, Helvetica is there.

For any reason if these fonts failed to load, we have set sans-serif as the last priority, any supported Sans-serif (Ariel or any other) fonts will be applied.

Upvotes: 1

Related Questions