Fonts

[CH] Glyph "?" (0x7ae0) not available in font "Roboto-Regular".

To prevent this, make sure you use the proper font.

As an example, suppose the right arrow character is used in a definition list like this:

<dlentry>
  <dt>&#8594;</dt>
  <dd><ph>This is the right arrow.</ph></dd>
</dlentry>

If the font does not include this character, the output will look something like this:

  #
    This is the right arrow.

For the second case, if you use Times New Roman for the entire publication, you could add Symbol as the fallback font. In your customization CSS, add:

*[class ~= "topic/dlentry"] {
  font-family: "Times New Roman", Symbol;
}

To change the font for the entire publication, not just an element, you can use:

:root {font-family:  "Times New Roman", Symbol !important; }

@page {
    @top-left {font-family:  "Times New Roman", Symbol !important; }
    @top-right {font-family:  "Times New Roman", Symbol !important; }
    @top-center {font-family:  "Times New Roman", Symbol !important; }
    @top-left-corner {font-family:  "Times New Roman", Symbol !important; }
    @top-right-corner {font-family:  "Times New Roman", Symbol !important; }
    
    @bottom-left {font-family:  "Times New Roman", Symbol !important; }
    @bottom-right {font-family:  "Times New Roman", Symbol !important; }
    @bottom-center {font-family:  "Times New Roman", Symbol !important; }
    @bottom-left-corner {font-family:  "Times New Roman", Symbol !important; }
    @bottom-right-corner {font-family:  "Times New Roman", Symbol !important; }
} 

Suppose that in your customization CSS, you have defined your font (for example, Roboto) using a Google web font:

https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap

You can force a font on all elements, then style the ones that need to be different. The advantage of this method is that you do not need to trace all elements that have a font family defined in the built-in CSS files, you just reset them all.

In your customization CSS, add an !important rule that associates a font to all the elements from the document:

* {
  font-family: "Roboto", sans-serif !important;
}

Next, if you want to use another font for the document headings, your customization CSS should contain the following rule:

*[class ~= "front-page/front-page-title"],
*[class ~= "topic/title"] {
  font-family: "Roboto", sans-serif !important;
  font-weight: bold;
}

Then, identify the selectors for the elements that need to be styled with a different font than the one associated above. For information on how to do this, see: Debugging the CSS.

For example, if you want the titles or the pre-formatted text to have a different font from the rest, matched by the above * selector, you need to use more specific CSS selectors:

*[class~="pr-d/codeph"],
*[class~="topic/pre"] {
  font-family: monospace !important;
}

For Asian languages, you must use a font or a sequence of fonts that cover the needed character ranges. If the characters are not found, the # symbol is used.

When you specify a sequence of fonts, if the glyphs are not found in the first font, the next font is selected, and so on until one is found that includes all the glyphs. A common font sequence for Asian languages is as follows:

  font-family: Calibri, SimSun, "Malgun Gothic", "Microsoft JhengHei";

To apply this font sequence, see: How to Set Fonts in Titles and Content.

Some of the Asian fonts do not have italic, bold, or bold-italic variants. In this case, you may use the regular font file with multiple font face definitions to simulate (synthesize) the missing variants. You need to use the -oxy-simulate-style:yes CSS property in the font face definition as explained in: Using Simulated/Synthetic Styles in Oxygen Chemistry.

/* Font Declaration */
@font-face {
    font-family: "Noto Sans Tamil";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/ttf/notosanstamil/NotoSansTamil-Regular.ttf);
}

@font-face {
    font-family: "Noto Sans Tamil";
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/ttf/notosanstamil/NotoSansTamil-Bold.ttf);
}

/* Font Usage */
* {
    font-family: sans-serif, "Noto Sans Tamil";
}

Music is rendered as normal text in most fonts, but some of them will render them as musical glyphs. For example, the MusGlyphs font converts the text to music and adjusts it to the surrounding text.

@font-face {
  font-family: MusGlyphs;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/otf/musglyphs/MusGlyphs.otf);
}
@font-face {
  font-family: MusGlyphs-Text;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/otf/musglyphs/MusGlyphs-Text.otf);
}
@font-face {
  font-family: MusGlyphs-Text;
  font-style: normal;
  font-weight: bold;
  src: url(../fonts/otf/musglyphs/MusGlyphs-TextBold.otf);
}

/* 
 * All the elements are displayed with the MusGlyphs-Text.
 * If a text is prefixed with @, music will be displayed. 
 */
body {
  font-family: MusGlyphs-Text, serif;
}

/* Elements with @outputclass="music" contain only music. */
*[outputclass ~= "music"] {
  font-family: MusGlyphs, serif;
}