#1

Steps to reproduce

  1. Open settings
  2. Select Options->Appearance
  3. Set Theme to “None”
  4. Enable the following CSS snippet
    .markdown-source-view { font-family: 'Menlo', monospace; }

Expected result

  • Font selected through CSS snippet is consistently applied in the editor, regardless of platform

Actual result

Environment

  • Operating system: macOS Big Sur 11.5.1, iOS 14.7.1
  • Obsidian version: 0.12.12 on Mac, 1.0.4(21) on iOS

Additional information

  • iPhone and iPad behavior is the same
  • When the Night Owl theme is applied and the following snippet is used instead, headers are accurately reflected on iOS but body text continues to use the default font
    :root {
   --font-family-editor: Menlo, Courier New, IBM Plex Mono, Monaco, Courier New, monospace;
   --font-family-preview: Karla, Avenir Next, Helvetica, Arial, sans-serif;
   --font-family-preview-heading: Rubik, Avenir Next, Helvetica, Arial, sans-serif; }
    Menlo macOS Night Owl
    Menlo macOS Night Owl1858×584 42.9 KB

    Menlo iPad Night Owl
    Menlo iPad Night Owl2360×517 37.8 KB
#2

The editor on desktop and mobile are different. Contact the author of the theme to fix the theme.

#3

Hi @WhiteNoise - I’m having the issue without a theme applied. I also showed it with a theme to demonstrate the inconsistent behavior.

When no theme is applied, custom css works fine on desktop but not on mobile. Does it need to be set differently between the platforms?

Again, I’m just using:

.markdown-source-view { font-family: 'Menlo', monospace; }
#4

yes. The editor is different.

#5

So, what needs to be set differently? Is there a different css tag to use for mobile? Or is changing the font in mobile not possible?

#6

Hi,

@ShawnL I have your very same question. Have you found an answer, if I may ask?

:slightly_smiling_face:

#7

This has worked for me, YMMV.

.cm-line,
.markdown-source-view,
.cm-s-obsidian,
.cm-header { 
   font-family: '<FONTNAME>';
}
#8

@JoelB Thanks. Perfect.