The characters not showing up properly in the title in the edit mode

[tingd0629]

Hi! Bryan,
As attached, I typed some characters but they are not showing up properly in the title line. Do you have a clue what might happen here? I didn't turn on vim key binding as mentioned in another discussion.

Thank you very much!

[tallguyjenks]

its the font in the CSS, try changing fonts :)

[tingd0629]

Hi! thank you for the reply, I'm pretty new to this css and I used your css file and I like the style very much so I want to fix it without changing the whole css file. and I'm wondering if you can explain a bit more in detail? why some character show up but not the other one. I still don't quite understand, should I use a different fonts? and I suppose I should change something here? thank you!

[tallguyjenks]

--font-monospace: 'Hack Nerd Font', ...

remove fira code

[tingd0629]

Hi! Thank you for your reply! I tried that, but seems nothing changed. probably the color is not correct? if I turn off the css OR the theme, nothing changed. but if I turn off theme AND css, then my characters are back. I feel the color of the title may somehow become the same as the background, that make them invisible to me? its looks like almost like a secret code...lol

[tallguyjenks]

oh i found it, yes. Here it is:

.theme-dark
{
    /* --font-monospace: 'fira code', 'Hack Nerd Font', 'Source Code Pro', monospace; */
    --font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace;
    --background-primary:         var(--dark0);
    --background-primary-alt:     var(--dark0);
    --background-secondary:       var(--dark0-hard);
    --background-secondary-alt:   var(--dark1);
    --text-normal:                var(--light0);
    --text-faint:                 var(--light3);
    --text-title-h1:              var(--neutral-red);
    --text-title-h2:              var(--neutral-orange);
    --text-title-h3:              var(--neutral-yellow);
    --text-title-h4:              var(--neutral-green);
    --text-title-h5:              var(--neutral-aqua);
    --text-title-h6:              var(--neutral-purple);
    --text-link:                  var(--bright-blue);
    --text-a:                     var(--bright-orange);
    --text-a-hover:               var(--bright-blue);
    --text-mark:                  var(--neutral-yellow);
    --pre-code:                   var(--dark1);
    --text-highlight-bg:          var(--faded-aqua);
    --interactive-accent:         var(--bright-orange);
    --interactive-before:         var(--dark4);
    --background-modifier-border: var(--dark2);
    --text-accent:                var(--bright-orange);
    --interactive-accent-rgb:     var(--bright-orange);
    --inline-code:                var(--bright-blue);
    --code-block:                 var(--bright-blue);
    --vim-cursor:                 var(--bright-orange);
    --text-selection:             rgba(168, 153, 132, 0.5); /* light4 */
}

.theme-light
{
    --background-primary:         var(--light0);
    --background-primary-alt:     var(--light0);
    --background-secondary:       var(--light0-hard);
    --background-secondary-alt:   var(--light1);
    --text-normal:                var(--dark0);
    --text-faint:                 var(--dark3);
    --text-title-h1:              var(--faded-red);
    --text-title-h2:              var(--faded-orange);
    --text-title-h3:              var(--faded-yellow);
    --text-title-h4:              var(--faded-green);
    --text-title-h5:              var(--faded-aqua);
    --text-link:                  var(--neutral-blue);
    --text-a:                     var(--neutral-orange);
    --text-a-hover:               var(--neutral-blue);
    --text-mark:                  var(--neutral-yellow);
    --pre-code:                   var(--light1);
    --text-highlight-bg:          var(--bright-aqua);
    --interactive-accent:         var(--neutral-orange);
    --interactive-before:         var(--light4);
    --background-modifier-border: var(--light2);
    --text-accent:                var(--neutral-orange);
    --interactive-accent-rgb:     var(--neutral-orange);
    --inline-code:                var(--neutral-blue);
    --vim-cursor:                 var(--neutral-orange);
    --text-selection:             rgba(189, 174, 147, 0.5); /* light3 */
}

.theme-dark code[class*="language-"],
.theme-dark pre[class*="language-"],
.theme-light code[class*="language-"],
.theme-light pre[class*="language-"]
{
    text-shadow: none !important;
    background-color: var(--pre-code) !important;
}

.graph-view.color-circle,
.graph-view.color-fill-highlight,
.graph-view.color-line-highlight
{
    color: var(--interactive-accent-rgb) !important;
}
.graph-view.color-text
{
    color: var(--text-a-hover) !important;
}
/*
.graph-view.color-fill
{
    color: var(--background-secondary);
}
.graph-view.color-line
{
  color: var(--background-modifier-border);
}
*/

html,
body
{
    font-size: 16px !important;
    font-family: var(--font-monospace); /** Remove this to return body font back to normal */

    /** Norse rune font for hilarity Comes from dafont.com */
    /* --custom-font: 'Norse'; */
    /* --custom-font: 'fira code', 'Hack Nerd Font', 'Source Code Pro', monospace; */
    --custom-H1-font-size: 38px;
    --custom-H2-font-size: 34px;
    --custom-H3-font-size: 30px;
    --custom-H4-font-size: 26px;
    --custom-H5-font-size: 22px;
    --custom-H6-font-size: 18px;
    --custom-font: var(--font-monospace);
    /* font-family: 'Norse';
    font-size: 20px !important; */
}

replace the section in the theme starting from .theme-dark selector all the way until you reach the strong selector and that should do it