Console.log custom fonts in google chrome

Question

I've been making game which is played in the browsers console, and I'm interested of the possibility of using custom fonts. I'm working with chrome and don't really care about compatibility with other browsers. I know that console.log() can be styled with CSS , but I haven't had any success with trying to get it to work with custom fonts.

My css looks like this:

@font-face {
  font-family: MyFont;
  src: url(MyFont.woff);
}

and my Js looks like this:

console.log("%cThis text shoud be styled!", "font-family: MyFont;");

I've allso tried using '':

console.log("%cThis text shoud be styled!", "font-family: 'MyFont';");

Both are in the same html file in their respective tags (no external css or js files) css on the top and js on the bottom.

Thanks in advance: :)

Answer 1

As far as I know you can use a font called "system-ui" to change the text's font. You can't use custom fonts, though.

console.log("%cThis text should be styled!", "font-family: system-ui");

// This might interest you as well
console.log("%cThis text should be styled!", "font-variant: small-caps");

Answer 2

console.log("%cThis is a custom font style","color: red; font-family:monospace; font-size: 20px");

Answer 3

if you're using google fonts what you could do is:

console.log(`example text`,`@import url('https://fonts.googleapis.com/...'); font-family:'your-font-family','monospace';`)