Change font in Obsidian Publish

[hiq]

Hello everyone, I have a question regarding changing the font in Obsidian Publish. I use the “Inter” font in the application, along with a CSS to change the weight of the titles. I applied the same CSS for weight in Publish, but I also used one to change the font.

The issue is that when I change the font in Obsidian Publish, it no longer adjusts the weight. Does anyone know how to resolve this?

body {
 	--h1-size: 1.7em !important;
	--h2-size: 1.55em !important;
	--h3-size: 1.4em !important;
	--h4-size: 1.2em !important;
	--h5-size: 1.15em !important;
	--h6-size: 1.125em !important;
	--h1-weight: 700 !important;
	--h2-weight: 650 !important;
	--h3-weight: 650 !important;
	--h4-weight: 600 !important;
	--h5-weight: 600 !important;
	--h6-weight: 600 !important;
	--font-text-theme: 'Inter' !important;
}

Another question is how do I put this line break that appears after H2 (Obsidian Publish) in a CSS?

[ariehen]

Font weights don’t have n50 values AFAIK, so you’ll want to pick 600 or 700 in your CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Also, you may need to import the font and its weights to get it working properly. The links in here may be of some help:

Setup custom font - Obsidian Publish

I reached out on Obsidian’s Discord server and got my problem solved there. The following articles were instrumental in figuring out what I need to do:

[kepano]

You should not use !important inside variables, it’s not necessary and can cause some unexpected effects.

[hiq]

Thank you for the help, I figured it out! @ariehen @kepano

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
 	--h1-size: 1.7em;
	--h2-size: 1.55em;
	--h3-size: 1.4em;
	--h4-size: 1.2em;
	--h5-size: 1.15em;
	--h6-size: 1.125em;
	--h1-weight: 700;
	--h2-weight: 700;
	--h3-weight: 700;
	--h4-weight: 600;
	--h5-weight: 600;
	--h6-weight: 600;
	--font-family: 'Inter', sans-serif;
}