Setting root font size

Hi everybody. I’m new here, which is testament to this community – you answered most of my questions already, so I was busy lurking. :wink:

Well… here’s one thing: How can I tell Blocs to use a different root font size?

It seems that Blocs has 16px hard-coded in its layout and preview; I tried overriding with both html and :root selectors, but to no avail. Browser preview works fine, though, so the code is legit.

Any help greatly appreciated. I have more questions regarding fonts, but this is the most pressing issue right now. Thanks. :slight_smile:

I think you can add a new css rule applied to the html element. Speak in blocs on the bottom right hand there’s a option to open the css rules and there add a new rule for html element

You can find that window as well in Window > Class Library Manager

That should do it I think, not double checked as I’m on mobile but as far i recall this is how you’d add any sort of custom classes and also customize existing classes

The class editor doesn’t allow tags at present. It will add a . infront of the html tag.

Adding some CSS to the page header won’t show until preview.

You can drop a Code Widget into your project, and make sure preview is selected on the right panel. Then adding some CSS like - will mean you see it on the design canvas.

<style>
html {
	font-size: XXpx;
}
</style>

I am not so sure it matters, but I would be more inclined to use custom classes. You can also set font sizes, under Project Settings, and also by Breakpoints.

Screen Shot 2021-04-12 at 6.49.02 PM

2 Likes

Ah, Code Widget works. Thanks so much.

A little background: I’m using rem throughout my design, so custom classes wouldn’t cut it. I’m on a 12/24px grid, and 16px means lots of fractions, which are getting hard to read, remember and recalculate.

The Project Settings don’t set the :root class, do they? (though that would be cool, I guess)

Yeah, I use rem and em throughout too.

No, the project settings font size basically just gets added to the CSS with the regular font-size.