CODEWITHSUNDEEP
htmlcssbrowserunicodefonts
Michael Moreno
Michael Moreno

Reputation: 1349

HTML Unicode displaying in different font

I'm using unicode to display chess pieces ♟ in HTML for a chess app, i.e ♟ = ♟

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles/style.css">
</head>
<body>
  <p class="pawn">&#9823;</p>
</body>

However they are not displaying the same on certain devices and I'm not sure how to fix it. Here's what it looks like vs what it should look like: What it looks like vs enter image description here

The wikipedia suggests this is based on the font being used, but I haven't had any success with changing it in CSS

@font-face {
  font-family: "Dejavu Sans";
  src: local("Dejavu Sans");
  unicode-range: U+26;
}

.pawn {
  font-family: "Dejavu Sans";
}

The whole @font-face/unicode-range bit is because the only other answers I can find say that I need to use it, but I'm not sure how.

In summary: I need to make my website display unicodes in a specifc font consistent across all devices on modern browsers.

Upvotes: 0

Views: 323

Answers (1)

Michael Moreno
Michael Moreno

Reputation: 1349

Devices display unicodes differently when they have different fonts installed locally that they default to. (Cr: Keimeno)

If you want devices to display with the same font even if they're not installed on their system, you need to provide it to their browser to download by designating a @font-face rule in the CSS, and then specifying the src url to where the font is stored. (Cr: Glacomo Catenazzi)

@font-face {
  font-family: "Dejavu Sans";
  src: url(dejavu-sans/DejaVuSans.ttf);
}

.pawn{
  font-family: "Dejavu Sans";
}

This solved my problem. I downloaded the DejaVu Sans font, stored it in the folder where I keep my CSS files, and then loaded and referenced it in the CSS.

Upvotes: 2

Related Questions