Open AfzGit opened 1 month ago
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";
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:
@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 😆
@AfzGit , @CtByte You should use asset.localhost
to load local resources and replace path slashes with %5C
, which is the URL-encoded equivalent of /
.
.woff2
file to font.woff2
.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
webfont.css
and config.yaml
<USER NAME>
in the file paths with your user name.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")
...
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.
@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 :)
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?
@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.
@CtByte Yes, that's exactly what I want. I just remembered that I needed to quote the font names. Thanks!
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: