Issue
I am trying to use a custom font (Figree) in my Tauri app. The font is loading correctly for some elements, but not for others. My code is below.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Window title</title>
<link href="/style.css" rel="stylesheet"/>
</head>
<body>
<div data-tauri-drag-region id="title-bar">
<p id="title-bar-title">Window title</p>
<button class="title-bar-button">Minimize</button>
<button class="title-bar-button">Maximize</button>
<button class="title-bar-button">Close</button>
</div>
<h1>This is a test.</h1>
</body>
</html>
CSS:
:root {
font-size: 20px;
}
*, ::after, ::before {
appearance: none;
box-sizing: border-box;
font-family: "Figtree" !important;
text-rendering: optimizeLegibility;
user-select: none;
}
body {
display: flex;
flex-direction: column;
}
#title-bar {
display: flex;
}
#title-bar-title {
display: block;
flex: 1 1;
text-align: center;
}
.title-bar-button {
flex: 0 0;
}
@font-face {
font-display: block;
font-family: "Figtree";
src: url("/assets/Figtree[wght].woff2");
}
@font-face {
font-display: block;
font-family: "Figtree";
font-style: italic;
src: url("/assets/Figtree-Italic[wght].woff2");
}
My goal is to use the Figtree font for all elements in my app. However, with the above code, the h1 element displays as expected (with the Figree font and a font weight of 700), but all other page elements that contain text do not. When removing the !important in the CSS code, no elements display with the Figtree font, making me wonder whether the user agent stylesheet has something to do with this.
Using the “inspect element” functionality, I have verified that the stylesheet and font files are loaded correctly. Under the “font” tab, all elements show up as having the Figtree font, but as pointed out earlier, not all actually display as this font, instead using a fallback sans-serif font.
I am using Tauri version 1.5 and version 2.0.3 of the Figtree font in WOFF2 format. My operating system is Linux Mint version 21.2.
Edit: I forgot to add this (I did not copy-paste the code), but the title bar div has the data-tauri-drag-region attribute, which makes it act like a native title bar. Could be important?
Screenshot of Tauri app:
Solution
Here's a demo project I've recreated on github with custom window and custom font, I did test it on Mac, all pieces seem to work okay. Including the Figtree font.
https://github.com/developermindsetcom/tauri-custom-font
Here's styles.css
:root {
font-family: Figtree;
//...
@font-face {
font-display: block;
font-family: "Figtree";
src: url("/assets/fonts/Figtree-Regular.woff2");
}
@font-face {
font-display: block;
font-family: "Figtree";
font-style: italic;
src: url("/assets/fonts/Figtree-Italic.woff2");
}
Also set decorations inside tauri.conf.json:
"windows": [
{
"decorations": false,
"fullscreen": false,
"resizable": true,
"title": "custom-font",
"width": 800,
"height": 600
}
]
And plugin-window since I'm using Tauri v2 (alpha):
"plugins": {
"window": {
"all": false,
"close": true,
"hide": true,
"show": true,
"maximize": true,
"minimize": true,
"unmaximize": true,
"unminimize": true,
"startDragging": true
},
...
Here's a little step-by-step tutorial I've added.
Let me know if builds and works on your Linux Mint.
Answered By - DeveloperMindset.com
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.