[Feature Request] Make Nerd Font icons available offline instead of fetching them

[AfzGit]

There are many problems that occur with an online approach:

Problem Case 1: You are outside without an internet connection, Zebar will not load it's icons
Problem Case 2: Your system is slow to connect to Wi-Fi which causes Zebar to start on launch without icons
Problem Case 3: Your Wi-Fi is slow/unresponsive, leaving you with no icons in Zebar (happens a lot with me)
Problem Case 4: Site is unresponsive
Problem Case 5: File is moved/removed from Nerdfonts site
Problem Case 6: File is updated and class names can change, making previous use of classes in Zebar do nothing

Consider adding webfont.css file (600kb size) to the project for offline use to solve all the problems above. Offline use does not seem to be breaking any licenses.

---

Code to change:

# Consider fetching this offline
window/bar:
    global_styles: |
        @import "https://www.nerdfonts.com/assets/css/webfont.css";

---

• No icons Without Wi-Fi:
  • 
• With Wi-Fi:
  • 

[CtByte]

I imagine that the option is there so you can decide to use any font you want, but perhaps having the option to import from a local file would be a good alternative

window/bar:
    global_styles: |
        @import "./assets/css/webfont.css";

[AfzGit]

I imagine that the option is there so you can decide to use any font you want, but perhaps having the option to import from a local file would be a good alternative

window/bar:
    global_styles: |
        @import "./assets/css/webfont.css";

Importing this way does not work. I reported this issue after trying to import it offline like you have shown

config:

[CtByte]

@AfzGit Yes, I was not sure if this would work and by the looks of it, tauri needs to do this a bit differently, just like how to config.yaml and script.js is loaded. I am not that familiar with tauri apps, but being able to load/import styles like that ( ./webfonts.css ) would be pretty useful as you pointed out.

I tried to load directly, but I was not really expecting that to work 😆

[edelvarden]

@AfzGit , @CtByte You should use asset.localhost to load local resources and replace path slashes with %5C, which is the URL-encoded equivalent of /.

Step 1: Download Resources

1. Download webfont.css
2. Download Symbols-2048-em Nerd Font Complete.woff2

Step 2: Prepare the Font File

1. Rename the downloaded .woff2 file to font.woff2.
2. Move font.woff2 to the zebar folder located at C:\Users\<USER NAME>\.glzr\zebar.

Here’s what your directory should look like:

    Directory: C:\Users\<USER NAME>\.glzr\zebar


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----         8/12/2024   2:26 PM           7886 config.yaml
-a----         8/12/2024   2:22 PM         963444 font.woff2
-a----         8/12/2024   2:04 PM            185 script.js
-a----          8/3/2024   7:24 PM            320 start.bat
-a----         8/12/2024   2:28 PM         471732 webfont.css

Step 3: Update webfont.css and config.yaml

1. Replace <USER NAME> in the file paths with your user name.

2. Open webfont.css and replace the existing font URL:

   Replace: url("../fonts/Symbols-2048-em Nerd Font Complete.woff2")

   With: url("http://asset.localhost/C%3A%5CUsers%5C<USER NAME>%5C.glzr%5Czebar%5Cfont.woff2").

webfont.css

/*
 *# [Nerd Fonts]  Website: https://www.nerdfonts.com
 *# [Nerd Fonts]  Development Website: https://github.com/ryanoasis/nerd-fonts
 *# [Nerd Fonts]  Version: 3.2.1
 *# [Nerd Fonts]  The following is generated from the build script
 */
@font-face{font-family:'NerdFontsSymbols Nerd Font';src:url("http://asset.localhost/C%3A%5CUsers%5C<USER NAME>%5C.glzr%5Czebar%5Cfont.woff2")
...

3. In config.yaml, update the global_styles section:

config.yaml

...
  global_styles: |
    @import "http://asset.localhost/C%3A%5CUsers%5C<USER NAME>%5C.glzr%5Czebar%5Cwebfont.css";
...

P.S. I think this is a dirty hack, but it works with local paths. I hope it helps you.

[CtByte]

@edelvarden This is so well written, you should make a PR. Thank you very much!

@lars-berger Edit: not sure if this is planned to make easier, but I do not mind it to be the way to load local files :)

[hongyuanjia]

I am trying to migrate to Glazewm v3. I am not familiar with CSS and JS. Can I directly use the name of the locally installed Nerd font on Windows instead of specifying the full path of the font file?

[CtByte]

@hongyuanjia I installed "JetBrains Mono" font on Windows and use it in the CSS like this:

  styles: |
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    height: 100%;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 14px;

So, I think if you installed the Nerd font then you can use it by name instead of the url to the woff2 file in the webfont.css. I hope that is what you meant.

[hongyuanjia]

@CtByte Yes, that's exactly what I want. I just remembered that I needed to quote the font names. Thanks!

[lars-berger]

Closing in favor of #130