Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Load custom fonts for different browsers on Android 15+ #1

Closed
JingMatrix opened this issue Dec 8, 2024 · 6 comments
Closed

Load custom fonts for different browsers on Android 15+ #1

JingMatrix opened this issue Dec 8, 2024 · 6 comments

Comments

@JingMatrix
Copy link
Owner

JingMatrix commented Dec 8, 2024 •
edited
Loading

Currently, custom fonts added by MagiskFonts are not rendered correctly in WebView/Chromium based browsers.
This Zygisk module aims to solve this problem.

Here are relevant docs:

  1. Font Matching
  2. ZygotePreload
  3. About the Zygote processes
  4. skia
@JingMatrix
Copy link
Owner Author

JingMatrix commented Dec 8, 2024 •
edited
Loading

Possibly related function calls:

  1. FontSrcLocalMatchingEnabled, whose default value is false
  2. GetLocaleSpecificFamilyName

@JingMatrix JingMatrix pinned this issue Jan 20, 2025
@JingMatrix JingMatrix linked a pull request Jan 20, 2025 that will close this issue
Add HTML testing page #2
Closed
@JingMatrix
Copy link
Owner Author

JingMatrix commented Jan 20, 2025 •
edited
Loading

I have used the following CSS rule for testing:

FontLoader/test/index.html

Lines 9 to 33 in c021e90

<body>
<style>
@font-face {
font-family: Test;
src: local(STKaiti), url("/system/fonts/华文仿宋.ttf"),
url("./system/fonts/华文行楷.ttf"), local(STXihei);
}
h1 {
font-family: Test;
font-weight: normal;
text-align: center;
padding-top: 20%;
}
p {
text-indent: 2em;
text-align: center;
padding-top: 10%;
font-family: STLiti;
}
</style>
<h1>Using custom fonts 测试</h1>
<p>This is an example of a simple HTML page with one paragraph.</p>
</body>

and all mentioned fonts in the code are installed into system using MagiskFonts.

Here are the results

  1. In Chrome browsers, the rendered font for h1 is /system/fonts/华文仿宋.ttf, font for p is not rendered;
  2. In Edge, Bromite and WebView based browsers, the rendered font for h1 is STKaiti, font for p is not rendered;
  3. In Firefox, the rendered font for h1 is STKaiti, the rendered font for p is STLiti.

Note that when p is not rendered by the given font, it is rendered using some system fallback font, which seems to be non-serif.

@JingMatrix JingMatrix changed the title Load custom fonts for WebView process on Android 15+ Load custom fonts for different browsers on Android 15+ Jan 20, 2025
@JingMatrix
Copy link
Owner Author

The above test was misleading, because the font /system/fonts/华文仿宋.ttf is actually loaded from remote.
After testing, I confirm that no browser can directly use device files as src for font-face.
Otherwise, it could be a serve security problem.

@JingMatrix
Copy link
Owner Author

JingMatrix commented Jan 20, 2025 •
edited
Loading

It turns out that Chrome is a privileged app on my device. It is thus better to ignore it for the moment.
I disabled it and install Chrome Dev for test.
Therefore, we can use the following script to render fonts for websites in Chromium-based browsers:

// ==UserScript==
// @name	Font Loader
// @namespace	JingMatrix
// @match	https://jingmatrix.github.io/zh/blog/*
// @run-at	document-idle
// @grant	GM_addStyle
// @description	Fix the problem of custom font loading in browsers on Android 15+
// ==/UserScript==

const font_lists = ["STKaiti", "STFangsong", "STXingkai", "STXihei", "STLiti"];

function GM_addStyle(doc, css) {
  if (doc == null) {
    console.error("Unable to add style for null document");
    return;
  }
  const style = doc.createElement("style");
  style.setAttribute("type", "text/css");
  style.textContent = css;
  try {
    (doc.head || doc.documentElement).appendChild(style);
  } catch {
    setTimeout(() => {
      doc.head.appendChild(style);
    });
  }
  return style;
}

const style = font_lists
  .map((font) => `@font-face { font-family: ${font}; src: local(${font}); }`)
  .join("\n");

GM_addStyle(document, style);

The above script can be loaded by ChromeXt.
However, iframe injection is not supported by ChromeXt yet. It is better to find a way that forces ChromeXt to match local fonts.

@JingMatrix
Copy link
Owner Author

JingMatrix commented Jan 20, 2025 •
edited
Loading

After reinstalling Chrome, now Chrome behaves the same way as other Chromium browsers.

Hence, this should really be a bug of how system fonts are matching on Android 15+.

@JingMatrix
Copy link
Owner Author

See JingMatrix/ChromeXt#136 (comment) for a wrokaround of Google Play Books.

@JingMatrix JingMatrix unpinned this issue Jan 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add HTML testing page JingMatrix/FontLoader
1 participant
@JingMatrix