Default System Fonts

General Discussion
1

Is there a way to set up blocs to use the default system font?

Hand-coding I use the following:

body {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI",
  "Roboto", Ubuntu, Helvetica, Arial, sans-serif;
}

I only see font set-up using Helvetica by default. Is there a way to turn of fonts and manually enter the CSS. Trying to avoid relying on cascading.

2

→ Native font stack

2 Likes
3

Thank you. I’m a noob on BlocsApp. So how do I implement this into Blocs? Thank you in advance.

5

@Monark, If you read the link @Jannis posted you will see a native font-stack is already applied. It is part of Bootstrap.

30 seconds in the browser inspector will also confirm it.

Screenshot 2023-07-12 at 3.49.48 PM
Screenshot 2023-07-12 at 3.49.48 PM704Ă—386 46.9 KB

As long as the text doesnt have any font family assigned it will inherit this.

2 Likes
6

@PeteSharp I’m not following this answer. If you create a new Blocks project and leave everything as the default, the font used is Helvetica. I don’t see any way of avoiding that. You can’t remove Helvetica from either the project settings or the main text class. Please clarify. Thanks!

7

If you create a new project > open the class manager, you can deleter the font family here.

This will then default to the std bootstrap system font. The drawback / side effect, is you will not see the system font in edit mode, only in preview and publish.

CleanShot 2026-01-15 at 11 .33.22@2x
CleanShot 2026-01-15 at 11 .33.22@2x2476Ă—1676 242 KB

1 Like
8

You can add this bric to a global footer, and it will then show the system font in edit mode also. It only affects edit mode and will not add anything in preview or published page. I just created it so I can see the real system font in edit mode after doing the step above.

System Font.bex.zip (252.0 KB)

4 Likes
9

Hi all,

I have always added a font to whatever I am doing - so can someone please tell me the benefit to just leaving it as a default font? (other than instant load I guess!)

I do at time to time see posts on the forum of things like this and I do wonder why or whats the point!….so I am just asking what benefit this will give me - thanks all.

10

This worked great! And, deleting the font properties did force the editor to show the system font (Blocs 6.3.3).

SCR-20260212-mlmj
SCR-20260212-mlmj1546Ă—748 88.6 KB

11

Thanks for making this bric, but I think it may be adding something to the CSS. I tried the following test:

  1. Created a new project and set the font to Lobster. Lobster shows in both the editor and the preview (as it should).
  2. Added the bric. Now, the editor shows the system font, but the preview shows Times (default Serif).
  3. In the browser dev tools, I turned off Lobster, and the preview shows the default sans-serif font, even though it’s still being defined as “Serif”.

I’m not sure if I’m doing something wrong.