#1

I don’t use Live view on obsidian. I prefer “Legacy Mode”. I used to use a custom css file to change fonts on both source-view & preview-view.

It use to work well before 2022. Now it does not work.

My Custom CSS :point_down:

.markdown-source-view  {
    font-family: 'MonoLisa', monospace !important;
}
.markdown-preview-view {
  font-family: 'Rubik', sans-serif !important;
}
.markdown-source-view .cm-header-1,.cm-header-2,.cm-header-3 {
    font-family: 'Sunflora', sans-serif !important;
}
.markdown-preview-view h1 {
  font-family: 'Sunflora', sans-serif !important;
}

Here, only the first part does not work that is

.markdown-source-view  {
    font-family: 'MonoLisa', monospace !important;
}

Font change in preview-view & strangely the “h1” code in source-view works.

How can I change font on source-view via Custom CSS ?

1 Like
#2

Does this work?

.markdown-source-view.mod-cm6 .cm-scroller {
    font-family: 'MonoLisa', monospace;
}

Angel

#3

No doesn’t work. I tried restarting, still doesn’t work.

#4

How about:

:root {
  --default-font: MonoLisa;
}

Angel

#5

NO, this also doesn’t work.

All I need, is to use different fonts in “edit mode” & “preview mode”.

#6

Diagnostics.

  1. Open the help vault
  2. Create and enable a sample CSS snippet with the following (changing font names to match whatever you have available on your system):
/* LEGACY EDITOR: EDITING VIEW */
.markdown-source-view {font-family: 'Courier New', Courier, monospace;}

/* NEW EDITOR: LIVE PREVIEW AND SOURCE MODE */
.markdown-source-view.mod-cm6 .cm-scroller {font-family: 'Times New Roman', Times, serif}

/* LEGACY EDITOR AND NEW EDITOR: READING VIEW */
.markdown-preview-view {font-family: Arial, Helvetica, sans-serif;}

Do the fonts change for the different views:

  1. legacy editor – editing
  2. legacy editor – reading
  3. new editor – live preview
  4. new editor – source mode
  5. new editor – reading

If the CSS works in the help vault but not in your own vault, then something (theme, snippet, plug-in) in your vault is in conflict.

Angel

1 Like
#7

I am using the “Sanctam Theme”, Maybe that is in conflict.

#8

I also found the recent Obsidian update broke my custom CSS. Specifically, the font specified for editor view no longer appears, regardless of whether Default Editing Mode is set to Source Mode or Live Preview. If I switch back to Use Legacy Editor, the font appears as before.

Here is how the editor font was set in my CSS file:

:root {
	--color-dark: #1a1a1a;
	--color-light: #f7f7f7;
	--color-accent: #c0522a;
	--font-family-editor: "iA Writer Duo V", "iA Writer Duo S";
}

Meanwhile, the body font for Reading View was not affected by the update, and continues to appear correctly regardless of the above settings:

body {
	font-family: "Crimson Pro";
	line-height: 1.4;
}

Anyone know why this editor font setting was broken and how to recover it?

2 Likes
#9

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