Why does CSS not style an installed font?-CodePudding

I have 3 files in C:\xampp\htdocs\area. They are index.php, styles.css, and result.php. While styling in index.php works fine, in result.php, it does not work.

In styles.css, the <span> and <h1> tags are styled in Poppins Black and Medium:

h1#font-custom {
    font-family: "Poppins Black" !important; /* This h1 tag is styled. Note: the !important 
    property is used to override the custom-body class which styles the elements inside the 
    body to be Poppins Medium */
}

span#font {
    font-family: "Poppins SemiBold" !important; /* The span tag is also styled */
}

In index.php, Poppins works fine, but in result.php, it doesn't show.

In result.php, the HTML looks good:

<!DOCTYPE html>
<html>
  <head>
    <title>Result</title>

    <link href="styles.css" type="text/css" rel="stylesheet">
  </head>

  <body class="custom-body">
    <?php 
    $height = $_GET['height'];
    $width = $_GET['width'];
    $area = $height * $width;

    echo '<span id="font-custom extra-big">The area is ',$area,'.</span>';
    echo '<br><br>';
    echo '<span id="font-custom extra-big"><a href="index.php">Go back</a></span>';
    ?>
  </body>
</html>

Please help!

CodePudding user response：

You say that in results.php the HTML looks good. I'm afraid it doesn't.

Try putting the resulting HTML through a validator and it will tell you that you cannot have more than one font-custom id - ids have to be unique.

Also, you are setting span#font in the CSS but nowhere in your HTML is there a span with id font.

I think you are wanting to use a class to set the font in various places.

<!DOCTYPE html>
<html>
  <head>
    <title>Result</title>

    <link href="styles.css" type="text/css" rel="stylesheet">
  </head>

  <body class="custom-body">
    <?php 
    $height = $_GET['height'];
    $width = $_GET['width'];
    $area = $height * $width;

    echo '<span class="font-custom extra-big">The area is ',$area,'.</span>';
    echo '<br><br>';
    echo '<span class="font-custom extra-big"><a href="index.php">Go back</a></span>';
    ?>
  </body>
</html>

and in your CSS:

h1.font-custom {
    font-family: "Poppins Black" !important; /* This h1 tag is styled. Note: the !important 
    property is used to override the custom-body class which styles the elements inside the 
    body to be Poppins Medium */
}

span.font-custom {
    font-family: "Poppins SemiBold" !important; /* The span tag is also styled */
}

Remember to change any h1 elements to have a class rather than an id in the same way as we did for the spans.

CodePudding user response：

have you tried to clear your cache? Often, when images, and other stuff don't load for me, I clear my cache. Also, it seems that you classes font-custom-extra-big doesn't match the span#font. Also, if you want all the fonts in a file to default to a certain font, you can write:

body {
    font-family: "Poppins Black";
}

#font {
    font-family: "Poppins Black"; /* Note that I didn't put the element name because it is better practice not to do so... */
}

Lastly, you can also try using incognito, because then it basically doesn't save your cache.

Hope this was helpful!