Change pre tag font in LWC

Telegram logo Join our Telegram Channel

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:


import { LightningElement } from "lwc";

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


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


.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";

No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at