Different fonts for callouts

Hey, I’m trying to use a different font for all the callout boxes, but I’m not sure how. Tried playing without some CSS snippets b ut couldn’t get anything to work

Each type of callout’s parent div has a data-callout attribute with the value of the type of callout.

Ex.:

<div data-callout-metadata="" data-callout-fold="" data-callout="abstract" class="callout"><div class="callout-title"><div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-clipboard-list"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg></div><div class="callout-title-inner">Abstract</div></div><div class="callout-content">
<p>Here's an Abstract callout.</p>
</div></div>

so you could target all abstract callouts in CSS like this:

.callout[data-callout="abstract"] {
    font-family: 'Brush Script MT', cursive;
}

Hello, you can do it fairly simple:

.callout[data-callout="arial"] {
--callout-color:  119,136,153;
font-family: 'Arial';
}

Now when you type

>[!arial] Hello
>Hello

You’ll get the desired font (and color if you wish):

Bonus: You may want to remove the icon, then paste this:

.callout[data-callout="arial"] {
--callout-color:  119,136,153;
font-family: 'Arial';
}
.callout[data-callout="arial"] .callout-icon {
display: none;
}

Result:

Hope that helped!

Thanks, I was thinking about something similar, but it doesn’t seem to work

Which theme are you using?

Prism, although it doesnt seem to work on the default theme either!

i’ve been trying to figure this out and still confused , any help is appreciated

Please show your current CSS setting, and restate whether you want to change the font for every callout there is, or just some particular ones like [!info] or [!arial] ?

Sorry do you want to see what css snippets i’m currently using or something else?

I’d like this change to apply to all call-outs

thanks:)

Those related to callouts, and please tell if either of them works or not.

I haven’t changed any css related to call-outs, i tried the suggestions that have been listed above but none of them have worked. I am using the prism theme

Create a CSS snippet with the following:

.callout {
  font-family: "Some font", "Some alternative font";
  font-size: 10em;
}

After creating the snippet, in vault/.obsidian/snippet/someCss.css, do remember to enable it in Settings > Appearances (CSS snippets) > someCss.

And your font should have been changed. In case you’re unsure on whether your CSS hits or not, change the font-size to some strange number. 10em should be very well seen.

If you can’t get it to display at a different size, make sure that your CSS file actually ends with .css, and is a plain text file. Not something made by Obsidian or a text editor like Word (or in some cases Text Edit (with formatting)).

So try this, and if it doesn’t work, please show a screenshot of your CSS file enabled in the Settings > Appearances (CSS Snippets), and post the CSS you tried.

Other variants can be used, and there is also a recent thread also discussing how to change the font:

Finally, this applies for the standard callouts of the following form:

> [!info]
> My info callout

If you’re using Admonition style callouts, they use a different syntax.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.