Change pre tag font in LWC

Hello Trailblazers! Sharing simple code to illustrate changing the default font of the <pre> tag in HTML from "Console" to the default LWC/Salesforce font:

Component.js

import { LightningElement } from "lwc";

export default class Component extends LightningElement {
    data = "Some text to show in PRE tag";
}

Component.html

<template>
    <pre class="font-reset">{data}</pre>
<template>

Component.css

.font-reset {
	font-family: var(--lwc-fontFamily), var(--lwc-apple-system),
		BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}