My trashy CSS to make Obsidian use the fonts I like

font.css

:root{
  /* editor mode */
  --text-editor: 'iA Writer Mono S';

  /* code */
  --font-monospace: 'FiraCode Nerd Font';
}

body {
  font-family: var(--default-font);
}

text{
  font-family: var(--default-font);
}


/* -- editor mode -- */

.markdown-source-view {  /*Editor Mode*/
  font-family: var(--text-editor);
}

.cm-s-obsidian .hmd-fold-html-stub,
.cm-s-obsidian .hmd-fold-code-stub,
.cm-s-obsidian.CodeMirror .HyperMD-hover > .HyperMD-hover-content code,
.cm-s-obsidian .cm-formatting-hashtag,
.cm-s-obsidian .cm-inline-code,
.cm-s-obsidian span.cm-inline-code,
.cm-s-obsidian .cm-hmd-indented-code,
.cm-s-obsidian .HyperMD-codeblock,
.cm-s-obsidian .HyperMD-hr,
.cm-s-obsidian .cm-hmd-frontmatter,
.cm-s-obsidian .cm-hmd-orgmode-markup,
.cm-s-obsidian .cm-formatting-code,
.cm-s-obsidian .cm-math,
.cm-s-obsidian span.hmd-fold-math-placeholder,
.cm-s-obsidian .CodeMirror-linewidget kbd,
.cm-s-obsidian .hmd-fold-html kbd {
  font-family: var(--font-monospace);
  font-size: 100%;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga" on, "calt" on, "ss02" on;
}


/* -- preview mode -- */

.markdown-preview-view code {
  font-family: var(--font-monospace);
  font-size: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga" on, "calt" on, "ss02" on;
}

 /* Code blocks */
  /* Inline code */

code[class*="language-"],
pre[class*="language-"] {
  font-family: var(--font-monospace);
  font-size: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga" on, "calt" on, "ss02" on;
}

This is the result of looking at other code and a bunch of trial and error. Feels real brittle. There's still much mystery here and I couldn't quite get it to do what I wanted, but … this is brings things closer to the other environments I use. Looking for a (somewhat) consistent experience across my apps.

Found and forked an iA inspired theme.