Treestyletab: Trouble setting custom font via css

[AndydeCleyre]

Short description

I'm trying to specify the font used for the tabs, but it just changes from sans to serif, probably because it can't find the font, just like FF itself when similarly attempted in userChrome.css. But in that case I can get around it by using @font-face.

Steps to reproduce

First, this works for the nav/url bar in userChrome.css, so here's that in its entirety:

@font-face {
  font-family: 'Iosevka';
  src: url('/usr/share/fonts/TTF/iosevka-custom-regular.ttf')  format('truetype')
}
#TabsToolbar { visibility: collapse; }
#nav-bar {
  background: #262C2E !important;
  border-top: #262C2E !important;
}
* { font-family: Iosevka !important; }

Here's the custom css field in TST preferences:

@font-face {
  font-family: 'Iosevka';
  src: url('/usr/share/fonts/TTF/iosevka-custom-regular.ttf')  format('truetype')
}

.tab.unread .label { color: darkorange !important; }
.tab.discarded { opacity: 0.93; }
:root { --tab-height: 30px !important; }  
.tab:not(.pinned) { height: var(--tab-height) !important; }
:root.left #tabbar { direction: ltr; }
.tab.private-browsing .label:before { content: "🕶"; }
.tab { font-family: Iosevka !important; }

Environment

• Platform (OS): Arch Linux
• Version of Firefox: 57
• Version (or revision) of Tree Style Tab: 2.2.9

[piroor]

Could you see the Debug console for Tree Style Tab from about:debugging, any security error? I think such a local file access can be blocked by Firefox.

[AndydeCleyre]

Ah, thanks, maybe I can copy or symlink the font into the extension directory. It says:

downloadable font: download failed (font-family: "Iosevka" style:normal weight:normal stretch:normal src index:0): status=2152857618 source: moz-extension://22ae34d3-971f-4158-bfc0-d5777a16bf63/usr/share/fonts/TTF/iosevka-custom-regular.ttf

OK, so I changed the @font-face path to /iosevka-custom-regular.ttf and ran:

ln -s /usr/share/fonts/TTF/iosevka-custom-regular.ttf <ff-profile>/browser-extension-data/[email protected]/

But that doesn't work, same error, just shorter path. Is there a particular directory that corresponds to moz-extension://22ae34d3-971f-4158-bfc0-d5777a16bf63/?

[piroor]

Sadly there is no way to know actual unique URL in static CSS codes - maybe due to a security reason. We need to use JavaScript code to resolve it like:
https://github.com/piroor/treestyletab/blob/398ee71291dd7c5d385d973e1b603c6d65eb6131/webextensions/common/tree/constants.js#L223

I think I should introduce something placeholder like font-face: url("%LOCAL_DATA%/iosevka-custom-regular.ttf") in future versions. It will be resolved to actual URL including UUID.

[piroor]

We should do something like .replace(/%LOCAL_DATA%/gi, actualURL) here:
https://github.com/piroor/treestyletab/blob/81fa73e0128f4831fd1a6d453d1b5d653adabd88/webextensions/sidebar/sidebar.js#L261-L263

[AndydeCleyre]

Can userChrome.css be used to change the tabs' font somehow, when using TST?

[piroor]

userChrome.css doesn't affect to addon's sidebar. Instead you need to use userContent.css like:

@-moz-document regexp("moz-extension://.+/sidebar/sidebar.html") {
 .tab .label {
   font-weight: bold !important;
 }
}

[refola]

I'm on Chakra Linux (structurally similar to Arch) and installed the Dotsies font using KDE's default font viewer/installer. With that, a simple .tab{font-family: Dotsies;} suffices in TST's custom CSS box.

Similarly, using kfontview /usr/share/fonts/TTF/FONT_FILE.ttf to get the name of the font, it also works when I replace "Dotsies" with the other font's name.

Also, installing iosevka-regular.ttf (as a personal font, not system) from the 01-iosevka-1.13.3.zip release and using .tab{font-family: Iosevka;} also works.

I'm pretty sure that your iosevka-custom-regular.ttf isn't installed correctly. Looking at the AUR package linked to from Iosevka's README, it seems that running fc-cache is missing from the PKGBUILD....

I'm not ambitious enough to attempt Arch installation to test this, but I strongly suspect that running sudo fc-cache will fix the problem for you, and that the error is that the AUR package lacks a post_install() function to update the system's font cache.

[AndydeCleyre]

@refola These days, pacman has a hook to run fc-cache automatically whenever a package installs files to /usr/share/fonts.

[refola]

@AndydeCleyre Ahh, I did not know it did that automatically without the package having to specify. In that case the only guesses I have left are that the font file itself is somehow broken (what name is shown when you open it with a font viewer?) or pacman's fc-cache was system-only and running it as a regular user (e.g., fc-cache -f -v) _might_ do something.

[piroor]

I close this because outdated.