'How to insert bold quote symbols in HTML

I wanted to insert this bold ❝❞ as you can see on https://fonts.google.com/specimen/Work+Sans?preview.text=%E2%9D%9D%E2%9D%9E%20: The bold ❝❞

To do that, I quickly came up with this:

* {font-family: 'Work Sans', sans-serif;}
<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=Work+Sans&display=swap" rel="stylesheet">
<h1>❝ Something ❞</h1>

The problem is that when I run that code, it is this that is shown:

It is not this that I want

What am I missing? Oh, and when I go to this website, more symbols appear like the one below appear!

This appeared as NOT a image

And all the symbols on this screenshot

htmlcssunicodefontssymbols


Solution 1:[1]

I couldn't find out what's the Google Fonts problem but if you download their fonts form their website they should work properly.
You can also find specific font weights that you need through Network tab in Inspect Elements

Betworks element

Solution 2:[2]

You use font-size and use font-weight as you need or you can use icon for it.

Solution 3:[3]

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>HTML</title>
  
  <!-- HTML -->
  

  <!-- Custom Styles -->
  <style type="text/css" media="all">
   b::before{
  content: "\201C"; 
  color: black;
  font-size: 25px;
  font-family: 'Playfair Display', serif;
}

b::after{
  content: "\201D"; 
  color: black;
  font-size: 25px;
  font-family: 'Playfair Display', serif;
}

  </style>
</head>

<body>
 <p> there is <b>Something</b></p>
  <!-- Project -->
  <script src="main.js"></script>
</body>
</html>```

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tiago Rangel de Sousa
Solution 2
Solution 3 Red Queen

Related Questions