CODEWITHSUNDEEP
htmlcssunicodefontssymbols
Tiago Rangel
Tiago Rangel

Reputation: 1327

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

Upvotes: 0

Views: 833

Answers (3)

Alireza Soltani
Alireza Soltani

Reputation: 112

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

Upvotes: 1

Red Queen
Red Queen

Reputation: 1

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

Upvotes: 0

Rasel Hossain
Rasel Hossain

Reputation: 1

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

Upvotes: 0

Related Questions