search

playerofgames / logseq-mia-theme

A Logseq theme inspired by macOS and iA Writer.
MIT License
84 stars 3 forks source link

Missing fonts on Android #16

Closed ghost closed 1 year ago

ghost commented 1 year ago

Hi! First of all, thank you for this great theme and your ongoing efforts.

When I tried to use the theme via custom css on Android, main styles applied but not the fonts. I suspect it's because of relative URLs for nested imports. Android or Logseq doesn't support these behavior. I couldn't test it because of lacking access to proper CSS hosting.

playerofgames commented 1 year ago

Weird. Unfortunately I don't have Android to troubleshoot this. I use the theme in iOS via a single import in custom.css and it works fine there.

You could try to explicitly importing each file in your css. For example, if you are using miA Sans Compact:

@import "https://playerofgames.github.io/logseq-mia-theme/fonts/mono.css";
@import "https://playerofgames.github.io/logseq-mia-theme/fonts/sans.css";
@import "https://playerofgames.github.io/logseq-mia-theme/css/calculator.css";
@import "https://playerofgames.github.io/logseq-mia-theme/mia_base.css";
@import url('https://playerofgames.github.io/logseq-mia-theme/mia_sans_compact.css');

(Though since some stuff loaded, you probably don't need to load mia_base.css explicitly.)

Let me know how it goes!

ghost commented 1 year ago

Thank you for your reply and suggestion. Sadly it didn't work. After that I tried to change URLs from relative to absolute, woff2 to woff etc. but all of them also didn't work. It looks like I was wrong about importing.

By the way I tried a couple of different themes with custom base64 fonts to check if it's my phone, and they worked.

ghost commented 1 year ago

I fixed the issue. Just added this code to mia_base.css.

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

I believe you would add this better than me but the problem is missing body and/or font-family tag :)

playerofgames commented 1 year ago

Ah interesting! Since this does not seem necessary for any other platforms, I went looking in the Logseq css and found this:

html:not(.is-native-android) {
font-family: var(--ls-font-family),sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol !important
}

Clearly the devs chose not to override the default font for Android for some reason. I changed font targeting in miA 1.5.0 and a side-effect would be that this underlying Logseq styling comes back.

I'd rather not override body for compatibility purposes, but see no problem in overriding html in miA in this way.

playerofgames commented 1 year ago

This should be fixed now in v1.5.2. Please confirm,

ghost commented 1 year ago

Thank you! It's fixed now. I was trying to another fix for the issue until noticed your fix and found this one works too if you want to see more possibilities:

`.ls-card, .sidebar-item .content,

main-content-container .content,

main-content-container .cp__sidebar-main-content,

main-content-container div.page-hierarchy div.initial {

font-size: var(--content-font-size, 12pt);
line-height: var(--content-line-height, 18pt);
font-feature-settings: var(--content-font-stylistic-set, normal);
 font-family: var(--ls-font-family);

}`

playerofgames commented 1 year ago

I believe the the latest release should make miA behave on Android just the way it does everywhere else. It is strange that the Logseq devs chose not to override the font on Android devices. Perhaps they decided that the system font was more reliable for the various possible Android devices out there, who knows. But if a user is setting a theme via css import, then they want to change the font.

I wonder when themes and plugins will be supported on mobile devices. Thankfully there is the custom.css option!