logseq-dev-theme icon indicating copy to clipboard operation
logseq-dev-theme copied to clipboard

minor CSS cleanup for default italic fonts

Open mkosma opened this issue 3 years ago • 1 comments

Hi! Thanks for a great theme.

I figured out changing to my local Calendas font. Turns out the text fonts are hard-coded in two places instead of one -- took me a while to figure out why italics weren't working.

I'd recommend changing the custom.css in the theme so that the i italic tag uses the --ls-font-family variable:

i {
  font-family: var(--ls-font-family);
}

It's pretty: image

For reference, here's my entire custom.css:

/* This must be the first line of the custom.css with other import rules */
@import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@main/custom.css");

/* You can also add other styles below to override the default theme values */
/* see https://github.com/pengx17/logseq-dev-theme/ for the source CSS */

@font-face {
  font-family: "Calendas Plus";
  src: 
    local("Calendas Plus"), 
    local("Calendas-Plus"),
    format('opentype');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Calendas Plus";
  src: 
    local("Calendas Plus Bold"), 
    local("Calendas-Plus Bold"),
    format('opentype');
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: "Calendas Plus";
  src: 
    local("Calendas Plus Italic"), 
    local("Calendas-Plus-Italic"),
    format('opentype');
  font-style: italic;
  font-weight: normal;
}

:root {
  --ct-text-size: 16px;
  --ct-line-height: 1.6;
   --ls-font-family: "Calendas Plus", "Only Emoji", "Source Sans 3 VF", "Source Han Sans VF",
    sans-serif;
  --ct-page-title-font-family: var(--ls-font-family);
  --ct-code-font-family: "Fira Code", monospace;
}

/* need also to override i or the italic font doesn't get used */
i {
  font-family: var(--ls-font-family);
}

mkosma avatar Mar 07 '22 07:03 mkosma

Thanks for pointing this out. Calendas is really a lovely typeface! As I recalled, the special rule for i was to fix an issue of displaying italic CJK glyphs https://github.com/pengx17/logseq-dev-theme/issues/13 when using "Source Han Sans VF". I do not know if there is a good workaround fix for that without overriding the font family for i.

Meanwhile, I would suggest that you can override it in the way you provided in the issue summary :D

pengx17 avatar Mar 07 '22 09:03 pengx17