0

How do I have a web page in which most things are from Noto Sans Mono but some symbols, like the chess white bishop U+2657 (or ♗) comes from Noto Sans Symbol 2?

I tried going to the Noto Sans Symbol 2 web page here: https://fonts.google.com/noto/specimen/Noto+Sans+Symbols+2/glyphs but the instructions for how to embed this font in a web page seem just to have to do with Noto Sans Mono. Aren't Noto Sans Symbol 2 and Noto Sans Mono different fonts? For one thing, Noto Sans Mono does not even have U+2657 does it?

Anyway, when I tried specifying that font family: font-family: 'Noto Sans Mono', monospace; as specified on the Google web page, the symbol was not found and defaulted (Chrome/Mac) to Menlo.

I am neither a web designer nor a font expert so please ask for further clarification if the information I am giving is insufficient.

2
  • Hi. Welcome to GDSE. Not sure I understand the problem. Have you actually selected the font? The instructions clearly contain the reference to "Noto Sans Symbols 2". see here
    – Billy Kerr
    Mar 10, 2023 at 16:35
  • It appears that the download instructions are different at different times and for different people.
    – kdog
    Mar 10, 2023 at 21:45

1 Answer 1

1

This question is more about coding than about graphic design, so it would probably be a better fit for Stack Overflow.

I'll answer anyway because it has an element of graphic design in it.

To make the fonts available to your website, you could place them in a fonts folder in the root of your site. The simplest structure would look something like this:

\
  fonts
    NotoSansMono-Regular.ttf
    NotoSansSymbols2-Regular.ttf
  index.html
  style.css

In the .css file you can add the following:

@font-face {
  font-family: NotoSansMono;
  src: url("fonts/NotoSansMono-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: NotoSansSymbols2;
  src: url("fonts/NotoSansSymbols2-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

This imports the two fonts and makes them available for use in CSS rules. Read more about the @font-face CSS at-rule here.

Now you could make CSS rules like this:

p {
  font-family: NotoSansMono;
}

span.symbol {
  font-family: NotoSansSymbols2;
}

And test it with HTML markup like this:

<p>ABCDEFGH</p>
<p>ABCD♗FGH</p>
<p>ABCD<span class="symbol">♗</span>FGH</p>

The result would look like this:

Noto Sans Mono doesn't seem to have the character so without the <span> it renders with a symbol font chosen by the browser. But with the span it renders as Noto Sans Symbols 2 as expected.

I suspect you need this for some coding language, and it might be an issue that the character is wider than the characters of the monospaced Noto Sans Mono so the characters from different text lines won't line up.

I've searched a bit for a monospaced font that has the character, but without luck.

1
  • Thank you. I think I am getting closer to understanding some of this stuff.
    – kdog
    Mar 10, 2023 at 21:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.