I have imported Comic Neue as my font in html. However, when I try to set the h1 font to bold in css with font weight, it will not allow me to. I also tried setting my entire body to bold with no resolve. I tried editing the html to set the h1 element to bold as well. It seems to blink on the page and stay the same when reloading the page. Edit: I included all of my code. Sorry I am new to this...
HTML/with header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SuperRestaurant</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="/images/gceEny9cd.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comic Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<!--NAVIGATION BAR-->
<div >
<nav>
<div >
<div >
<a href="C:/Users/Kascey.Malone/Documents/Websites/Midterm/midterm.coupons.index.html">
<p>Coupons!</p>
</a>
</div>
<div >
<a href="#Order">
<p>Order Online!</p>
</a>
</div>
</div>
</nav>
</header>
<!--HERO SECTION-->
<div >
<h1>Super Restaurant!</h1>
<div >
<div >
<button><a href="#menu">View Our Menu!</a></button>
</div>
</div>
</div>
</div>
<!--MENU TABLE-->
<!--inspiration for menu: https://artsdistrictkitchen.com/ -->
<div >
<table id="menu">
<thead>
<tr>
<th>Menu</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="">Beverages & Drinks</a></td>
<td>Burgers</td>
</tr>
<tr>
<td><a href="">Appetizers </a></td>
<td>Item & Price</td>
</tr>
<tr>
<td><a href="">Snacks & Sides</a></td>
<td>Description</td>
</tr>
<tr>
<td><a href="">Main Dishes</a></td>
<td>Item & Price</td>
</tr>
<tr>
<td><a href="">Desserts</a></td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td></td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
<tr>
<td> </td>
<td>Item & Price</td>
</tr>
<tr>
<td> </td>
<td>Description</td>
</tr>
</tbody>
</table>
</div>
<!--ABOUT | Two Column Layout-->
<div >
<div >
<div >
<h2>
Our Story!
</h2>
<img
src="C:/Users/Kascey.Malone/Documents/Websites/Midterm/images/6019677307b15.png"
alt="Restaurant in 2007 with owner Benjamin Cookin.">
<img
src="C:/Users/Kascey.Malone/Documents/Websites/Midterm/images/saltz-restaurant.jpg" alt="">
<img
src="C:/Users/Kascey.Malone/Documents/Websites/Midterm/images/Plead-5th.jpg" alt="">
</div>
<div >
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, ante non congue porttitor, ex
metus
interdum lectus, in tincidunt leo justo eu tortor. Nulla elementum elit et tortor vulputate congue. Phasellus
turpis
quam, luctus sit amet dapibus at, elementum at libero. Quisque convallis quis risus ut interdum. Nullam
tincidunt vel
magna non hendrerit. Nullam interdum turpis in risus congue fermentum. Vestibulum aliquam a leo vel mollis.
Phasellus
commodo urna vel libero commodo gravida. Ut egestas mollis nulla a maximus. Curabitur in est erat.
Pellentesque sit amet
eros nisi. Fusce ultricies tellus id hendrerit porta. Fusce commodo sit amet ex non volutpat. Integer quis
mattis nisl.
<br>
Duis vitae dolor nec dolor suscipit tincidunt. Sed accumsan sodales mauris, vitae consectetur neque lobortis
ut.
Suspendisse vel sagittis lorem. Etiam vitae lacus a orci fermentum congue vitae non arcu. Donec nec leo
fermentum,
molestie leo non, elementum eros. Integer vitae cursus dolor, aliquam ullamcorper orci. Vivamus dignissim
ullamcorper
dapibus. Nunc aliquam sagittis aliquam. Nullam molestie aliquet urna eget venenatis. Pellentesque faucibus
volutpat
porta. Ut ac commodo velit, eget blandit arcu. Integer eu eros pulvinar, convallis odio et, ornare magna.
Aliquam at
rhoncus erat. Morbi rhoncus sapien sed dui vestibulum, pharetra vulputate purus elementum.
<br>
Nam eget vestibulum risus. Sed sollicitudin ultrices mi viverra luctus. Donec eu lacus placerat, ultricies leo
quis,
commodo diam. Sed consequat tristique mattis. Proin pulvinar aliquet leo, et auctor nunc euismod eu. Ut nisi
turpis,
vehicula dapibus iaculis nec, faucibus sed turpis. Phasellus non sapien sapien. Duis sed turpis eu lacus
tristique
dapibus. Phasellus consequat enim est, et tristique mauris efficitur quis. Nam dictum sit amet massa a
vulputate.
Suspendisse porta accumsan bibendum. Nullam id quam vel tellus hendrerit laoreet ac nec augue. Nulla massa
mauris,
pharetra sit amet lorem nec, interdum porttitor elit.
<br>
Donec eget vehicula magna. Etiam viverra quam nec metus euismod mattis. Phasellus ligula mauris, faucibus et
luctus et,
tincidunt ut dolor. In hac habitasse platea dictumst. Nunc sagittis sodales lacus, at feugiat mauris mattis a.
Integer
et urna pharetra, dictum nibh ac, hendrerit tellus. In vestibulum ut nibh sed eleifend. Fusce ac volutpat
felis.
<br>
Praesent sed suscipit justo, eu dictum erat. Aenean hendrerit malesuada arcu eget pharetra. In placerat erat
purus, sit
amet venenatis lectus semper ut. Praesent ut augue vitae libero accumsan mattis at id felis. Fusce lectus
nisi,
fermentum at lorem eu, consectetur sagittis mauris. Maecenas id fringilla felis, sit amet porttitor nisi. Sed
eget leo
magna. Sed eget felis dolor. Pellentesque dapibus eget elit ac pulvinar. Donec placerat facilisis enim, eu
convallis
ante varius a. Sed ac arcu cursus, imperdiet mauris at, dictum augue. Interdum et malesuada fames ac ante
ipsum primis
in faucibus. Proin mauris ipsum, varius nec viverra vitae, varius sed mi. Mauris venenatis, leo ac eleifend
tempor,
tortor mi auctor justo, ut placerat nisl leo eu odio. Cras pharetra facilisis lacus a aliquet.
</p>
</div>
</div>
</div>
</main>
<!--FOOTER | Google Number-->
<footer>
<div >
<h3>PHONE</h3>
<p><a href="#">000.000.0000</a></p>
</div>
<div >
<h3>ADDRESS</h3>
<p>Super Restaurant!<br>
100 University Pkwy<br>
Macon, GA 31206</p>
</div>
<div >
<h3>© Super Restaurant! 2022. All rights reserved.</h3>
</div>
</footer>
</body>
</html>
CSS
/*
COLORS:
Dark Red:#9A1000
Dark Blue:#0C026C
Red:#FF1B00
Blue:#3823FC
Yellow:#FCD90A
White:#FFFFFF
*/
body {
margin: 0;
font-family: 'Comic Neue', sans-serif;
}
main {
margin-top: none;
}
.hero_image {
background-image: url("C:/Users/Kascey.Malone/Documents/Websites/Midterm/images/669.png");
height: 100vh;
width: 100%;
position: relative;
background-size: 100% 100%;
display:inline-block;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
header a {
font-weight: bold;
color: #FCD90A;
}
header a:link {
text-decoration: none;
}
header a:visited {
text-decoration: none;
}
header a:hover {
text-decoration: underline;
}
header a:active {
text-decoration: underline;
}
.topnav {
overflow: hidden;
text-decoration: none;
}
.left {
padding: 20px;
float: left;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: left;
}
.right {
padding: 20px;
float: right;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
/*HERO BOX*/
.hero {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.hero h1 {
font-size: 15vw;
margin: 0;
text-align: center;
color: #9A1000;
font-style: italic;
}
.hero button {
padding: 1em;
margin-top: 10vh;
background-color: #FCD90A;
white-space: nowrap;
font-size: 1vw;
font-family: 'Comic Neue', sans-serif;
}
.hero button a{
text-decoration: none;
color: black;
}
.hero button a:link {
text-decoration: none;
}
.hero button a:visited {
text-decoration: none;
}
.hero button a:hover {
font-weight: bold;
}
.hero button a:active {
font-weight: bold;
}
.container {
position: relative;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*MENU TABLE*/
.table {
background-color: white;
padding-top: 100px;
padding-bottom: 100px;
box-sizing:border-box;
}
table {
margin-left: auto;
margin-right: auto;
padding: 40px;
font-size: 1vw;
background-color: white;
border: solid 8px black;
box-sizing:border-box;
}/*Add border.*/
thead {
text-align: right;
}
td:nth-child(even) {
text-align: left;
padding-left: 100px;
}
td:nth-child(odd) {
text-align: right;
padding: 10px;
}
.row {
display: flex;
margin: 0 auto;
}
table a{
text-decoration: none;
color: black;
} /*Change color based off background*/
table a:link {
text-decoration: none;
}
table a:visited {
text-decoration: none;
}
table a:hover {
text-decoration: underline;
}
table a:active {
text-decoration: underline;
}
th {
padding: 10px;
}
/*ABOUT TEXT*/
.about {
height: auto;
padding-top: 5vh;
padding-bottom: 5vh;
background-color: #3823FC;
background-size: 100% 100%;
}
.column {
flex: 50%;
padding: 10px;
}
.column h2{
font-size: 2vw;
padding-left: 200px;
color: white;
}
.column p{
padding-right: 200px;
padding-top: 88px;
font-size: 1.5vw;
color: white;
}
.column img {
width: 30vw;
padding-left: 200px;
height: auto;
}
/*FOOTER*/
.footer {
background-color: #0C026C;
padding: 10px;
text-align: left;
color: white;
}
CodePudding user response：
Edited
Did you download the entire font-family? Or select just a few styles?
You could try replacing your imported font with a built-in CSS font and see if the bold property works. If the bold property works on the built-in font then you know the imported font is the issue.
Hope this helps!
CodePudding user response：
You can select any style of text on google fonts just click the bold 700 or up options and I could not find that you have even imported the font. And you can easily change the boldness within the import link. The higher the number the biggest the boldness of the parts that I have highlighted in the import link are the numbers to change.
@import url('https://fonts.googleapis.com/css2?family=Comic Neue:wght@700&family=Orbitron:wght@500&display=swap');
CodePudding user response：
You should check what weights the font you are using contains.
You can select the weights you want and copy the css code from the side panel.
@import url("https://fonts.googleapis.com/css2?family=Comic Neue:wght@300;400;700&display=swap");
p {
font-family: "Comic Neue", cursive;
font-size: 5vw;
padding: 1vh;
}
p::after {
content: attr(class);
border-radius: 0.5rem;
background: #000;
color: gold;
margin-inline-start: 1rem;
padding: 0.5em;
font-weight: 700;
font-size: 1.5vw;
}
p.weight-300 {
font-weight: 300;
}
p.weight-400 {
font-weight: 400;
}
p.weight-700 {
font-weight: 700;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body></body>
<p >Almost before we knew it, we had left the ground.</p>
<hr />
<p >Almost before we knew it, we had left the ground.</p>
<hr />
<p >Almost before we knew it, we had left the ground.</p>
</html>CodePudding user response：
You have in your CSS:
.hero h1 {
font-weight: 700//bold;
}
Try this in your css:
.hero > h1 {
font-weight: 700;
}