Add Inter Font into Publish.css?

Help
,
1

Newbie Q here . . . .

I’m using the Inter font in my desktop app, and I’d like to add it into my Publish.css file.

Will this set of instructions work for this purpose if I make the recommended changes in Publish.css?

Or is there another better (simpler) way to get the font style in Publish to match that of my desktop app?

Thanks in advance,

Metta

2

This is what I use for Atkinson Hyperlegible Next:

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap");
body {
    --font-text-theme: "Atkinson Hyperlegible Next";
    --font-text-size: 18px;
}
1 Like
3

Thanks so much, @dknight212! :folded_hands:

I just now dropped in your code, and it worked like a charm. :slightly_smiling_face:

May try testing again later with Inter ~ or I may just keep AHN, since it is so clean and legible! :+1:

4

@dknight212 ~ Ok, David. I don’t know if you’re up for another newbie question, but I have no experience modifying css files, and when I tried to test the “Inter” font in my publish.css file, I ran into an issue I don’t know how to resolve.

When I visit the Google font site for “Inter”, and then select the “Web > Import” radio button, it looks like I have to install 2 different sets of code (instead of the simple set of code you shared), and I’m not sure where to put them both:

  • Do they both need to go in the publish.css file?
  • Or does the first need to go in the publish file, and the second into a separate CSS snippet file?

I’ve experimented with several different guesses at how this should be done, all with no success.

Any additional hints/tips you (or another Obsidian user) could provide would be genuinely appreciated.

Thanks in advance!

5

Does this work?


@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
body {
    --font-family: "Inter", sans-serif;
    --font-text-size: 18px;
}

You will need to explore which font size is best for you.

1 Like
6

@dknight212 ~ Unfortunately, this code doesn’t work, but thank you for the suggestion, David. :folded_hands:

I’ll probably just go ahead and use your own AHN code until/unless I can figure out how to get Inter set as the default.

7

I’ve played around with the CSS for Inter but can’t get any variant of it to work. Sorry. I’m sure someone more knowledgeable will be able to help.

1 Like
8

Very much appreciated, David! Thanks for taking time to test and let me know. @dknighton

I’ll be looking forward to feedback from anyone else who might be able to help with this font display question in Obsidian Publish? . . .

1 Like