0

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.

Improve this question
7
  • 2
    This isn't the solution, but the reason why your pawn looks different. You're on Windows and the font Segoe UI Symbol has the style you're getting. For some reason the font isn't applied. Can you check your network tab to make sure that the Dejavu Sans font is correctly loaded? Commented Mar 15, 2021 at 14:30
  • stackoverflow.com/questions/66623400/… Commented Mar 15, 2021 at 14:51
  • @Keimeno Nothing is showing up in the font section of my network tab, not sure why. Is there anything else I need to put in the CSS to make it load? Commented Mar 15, 2021 at 16:20
  • 1
    If you want to specify a precise visualization, you must specify the font (a web font, user may not have your named font), so a URL. Note: users may prefer own system image (because it is consistent with all apps/webpages). Commented Mar 15, 2021 at 16:24
  • 3
    Instead of local you should use url and a URL with the webfonts. You may want to look for Google Fonts or other providers (and hosting) of webfonts Commented Mar 15, 2021 at 16:28

1 Answer 1

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.