Font_family does not work in Browser #4121

ClearSafety · 2024-10-06T11:48:42Z

ClearSafety
Oct 6, 2024

Duplicate Check

I have searched the opened issues and there are no duplicates

Describe the bug

Trying to customize the font in the Text control, but the font_family property does not work if one opens the app in browser. However, opening it with a normal window, the font_family is applied normally.
The same issue was analysed in #1794. But different from there, I'm not using a font from web, but from the system and from the folder assets/fonts.

It doesn't work even if I set web_renderer=ft.WebRenderer.HTML.

It's interesting that analysing the Console in the Inspection, I found two errors (vide attached)

is deprecated. Please include
Failed to parse font family "internal"

I attached some pictures to showing the problem and the app working properly outside the WEB mode.

Code sample

Code

Version 1
import flet as ft

def main(page: ft.Page):
    page.fonts = {'internal': 'assets/fonts/ELEPHNT.ttf'}
    page.add(
        ft.Text('Hello World!', font_family='Arial', size=50),
        ft.Text('Hello World!', font_family='Verdana', size=50),
        ft.Text('Hello World!', font_family='Tahoma', size=50),
        ft.Text('Hello World!', font_family='Elephant', size=50),
        ft.Text('Hello World!', style=ft.TextStyle(font_family='Elephant', size=50)),
        ft.Text('Hello World!', style=ft.TextStyle(font_family='internal', size=50)),
    )

ft.app(target=main, view=ft.AppView.WEB_BROWSER)

Version 2

import flet as ft

def main(page: ft.Page):
page.fonts = {'internal': 'assets/fonts/ELEPHNT.ttf'}
page.add(
ft.Text('Hello World!', font_family='Arial', size=50),
ft.Text('Hello World!', font_family='Verdana', size=50),
ft.Text('Hello World!', font_family='Tahoma', size=50),
ft.Text('Hello World!', font_family='Elephant', size=50),
ft.Text('Hello World!', style=ft.TextStyle(font_family='Elephant', size=50)),
ft.Text('Hello World!', style=ft.TextStyle(font_family='internal', size=50)),
)

ft.app(target=main, view=ft.AppView.WEB_BROWSER, web_renderer=ft.WebRenderer.HTML)

To reproduce

Run the repro test.

Expected behavior

Display the text according to the font applied to it.

Screenshots / Videos

Captures

[Upload media here]

![web-app - network](https://github.com/user-attachments/assets/e2166657-0d49-4f78-8c45-298593843ffc) ![web-app - console](https://github.com/user-attachments/assets/4f95ff00-8ff0-4482-a048-184daed923fd) ![app](https://github.com/user-attachments/assets/85287d2c-8545-4491-ac35-1156af07fe76)

Operating System

Windows

Operating system details

Windows 11 Pro

Flet version

0.24.1

Regression

No, it isn't

Suggestions

No response

Logs

<html>
<body>
<!--StartFragment--><div aria-expanded="true" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; outline-width: 0px; flex: 0 0 auto; color: rgb(31, 31, 31); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(254, 246, 213); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="source-code" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--source-code-font-family); white-space: pre-wrap; font-size: var(--source-code-font-size) !important; line-height: 1.2;"><span class="console-message-anchor" style="box-sizing: border-box; min-width: 0px; min-height: 0px; float: right; text-align: right; max-width: 100%; margin-left: 4px;"><button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://127.0.0.1:63545/main.dart.js:62929" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;"><br class="Apple-interchange-newline">main.dart.js:62929</button> </span><span class="console-message-text" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-on-surface-yellow);">Failed to parse font family "internal"</span></span></div><div class="" role="group" style="box-sizing: border-box; min-width: 0px; min-height: 0px; flex: 0 0 auto; color: rgb(31, 31, 31); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(254, 246, 213); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="monospace stack-preview-container width-constrained" style="display: inline-block; --monospace-font-size: 12px; --monospace-font-family: monospace; --source-code-font-size: 12px; --source-code-font-family: monospace; width: 887.4px; box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--monospace-font-family); font-size: var(--monospace-font-size) !important;">
  | $1 | @ | main.dart.js:62929
-- | -- | -- | --
  | (anonymous) | @ | main.dart.js:60780
  | (anonymous) | @ | main.dart.js:5052
  | $2 | @ | main.dart.js:69491
  | $1 | @ | main.dart.js:69485
  | M1 | @ | main.dart.js:70698
  | $0 | @ | main.dart.js:69967
  | OI | @ | main.dart.js:5196
  | $0 | @ | main.dart.js:69915
  | cIX | @ | main.dart.js:5228
  | cJz | @ | main.dart.js:5230
  | $1 | @ | main.dart.js:69430
  | childList |   |  
  | $1 | @ | main.dart.js:69437
  | chG | @ | main.dart.js:5235
  | bUH | @ | main.dart.js:5344
  | Cr | @ | main.dart.js:70706
  | aJZ | @ | main.dart.js:69899
  | pm | @ | main.dart.js:69897
  | el | @ | main.dart.js:5102
  | aI | @ | main.dart.js:200400
  | cHi | @ | main.dart.js:5300
  | $1 | @ | main.dart.js:70066
  | $1 | @ | main.dart.js:200429
  | cHd | @ | main.dart.js:7756
  | (anonymous) | @ | main.dart.js:7747
  | load |   |  
  | a_X | @ | main.dart.js:200421
  | t0 | @ | main.dart.js:200411
  | gG | @ | main.dart.js:70020
  | (anonymous) | @ | main.dart.js:178021
  | (anonymous) | @ | main.dart.js:5052
  | $2 | @ | main.dart.js:69491
  | $1 | @ | main.dart.js:69485
  | M1 | @ | main.dart.js:70698
  | $0 | @ | main.dart.js:69967
  | OI | @ | main.dart.js:5196
  | zD | @ | main.dart.js:69892
  | $0 | @ | main.dart.js:69937
  | cIX | @ | main.dart.js:5228
  | cJz | @ | main.dart.js:5230
  | $1 | @ | main.dart.js:69430
  | childList |   |  
  | $1 | @ | main.dart.js:69437
  | chG | @ | main.dart.js:5235
  | bUH | @ | main.dart.js:5344
  | Cr | @ | main.dart.js:70706
  | aJZ | @ | main.dart.js:69899
  | pm | @ | main.dart.js:69897
  | fI | @ | main.dart.js:69472
  | w | @ | main.dart.js:5042
  | (anonymous) | @ | main.dart.js:87456
  | (anonymous) | @ | main.dart.js:5052
  | $2 | @ | main.dart.js:69491
  | x | @ | main.dart.js:5038
  | axS | @ | main.dart.js:87458
  | $1 | @ | main.dart.js:87459
  | $2 | @ | main.dart.js:87463
  | $2 | @ | main.dart.js:176895
  | nk | @ | main.dart.js:143746
  | C | @ | main.dart.js:143692
  | qy | @ | main.dart.js:149281
  | oZ | @ | main.dart.js:149253
  | oZ | @ | main.dart.js:149287
  | U0 | @ | main.dart.js:149201
  | cr | @ | main.dart.js:149297
  | hK | @ | main.dart.js:149005
  | oZ | @ | main.dart.js:149257
  | oZ | @ | main.dart.js:149287
  | U0 | @ | main.dart.js:149201
  | cr | @ | main.dart.js:149297
  | hK | @ | main.dart.js:149005
  | oZ | @ | main.dart.js:149257
  | U0 | @ | main.dart.js:149201
  | cr | @ | main.dart.js:149279
  | hK | @ | main.dart.js:149005
  | oZ | @ | main.dart.js:149257
  | oZ | @ | main.dart.js:149287
  | U0 | @ | main.dart.js:149201
  | cr | @ | main.dart.js:149297
  | hK | @ | main.dart.js:149005
  | oZ | @ | main.dart.js:149257
  | oZ | @ | main.dart.js:149287
  | U0 | @ | main.dart.js:149201
  | av7 | @ | main.dart.js:149202
  | b7y | @ | main.dart.js:148924
  | aPu | @ | main.dart.js:148931
  | Af | @ | main.dart.js:148959
  | baK | @ | main.dart.js:148960
  | a2s | @ | main.dart.js:144993
  | aTH | @ | main.dart.js:130940
  | (anonymous) | @ | main.dart.js:3796
  | afV | @ | main.dart.js:140185
  | afU | @ | main.dart.js:140189
  | arr | @ | main.dart.js:140175
  | aS1 | @ | main.dart.js:140151
  | (anonymous) | @ | main.dart.js:3795
  | yk | @ | main.dart.js:1211
  | $1 | @ | main.dart.js:63386
  | cHd | @ | main.dart.js:7756
  | (anonymous) | @ | main.dart.js:7747
  | requestAnimationFrame |   |  
  | $0 | @ | main.dart.js:63372
  | v_ | @ | main.dart.js:64002
  | v_ | @ | main.dart.js:140130
  | GK | @ | main.dart.js:140105
  | b74 | @ | main.dart.js:140265
  | (anonymous) | @ | main.dart.js:3796
  | afV | @ | main.dart.js:140185
  | $2 | @ | main.dart.js:140226
  | aH | @ | main.dart.js:69021
  | la | @ | main.dart.js:208
  | aro | @ | main.dart.js:140161
  | aR9 | @ | main.dart.js:140147
  | (anonymous) | @ | main.dart.js:3796
  | yl | @ | main.dart.js:1214
  | $1 | @ | main.dart.js:63383
  | cHd | @ | main.dart.js:7756
  | (anonymous) | @ | main.dart.js:7747
  | requestAnimationFrame |   |  
  | $0 | @ | main.dart.js:63372
  | v_ | @ | main.dart.js:64002
  | v_ | @ | main.dart.js:140130
  | GK | @ | main.dart.js:140105
  | b74 | @ | main.dart.js:140265
  | (anonymous) | @ | main.dart.js:3796
  | afV | @ | main.dart.js:140185
  | $2 | @ | main.dart.js:140226
  | aH | @ | main.dart.js:69021
  | la | @ | main.dart.js:208
  | aro | @ | main.dart.js:140161
  | aR9 | @ | main.dart.js:140147
  | (anonymous) | @ | main.dart.js:3796
  | yl | @ | main.dart.js:1214
  | $1 | @ | main.dart.js:63383
  | cHd | @ | main.dart.js:7756
  | (anonymous) | @ | main.dart.js:7747

</span></div><!--EndFragment-->
</body>
</html>

Additional details

No response

OwenMcDonnell · 2024-10-07T17:00:41Z

OwenMcDonnell
Oct 7, 2024
Collaborator

The "Failed to parse font family 'internal'" error should go away if you specify the page.fonts dict like this instead,

page.fonts = {'internal': 'fonts/ELEPHNT.ttf'}

note the differing path to your sample.

2 replies

ClearSafety Oct 8, 2024
Author

Hi @OwenMcDonnell , you're completely right. It worked. Thank you.
The problem that remains now it's about the fact that system fonts don't work even with HTML render.

ClearSafety Oct 13, 2024
Author

Hi.
Any solution for this issue?

ClearSafety · 2024-10-13T14:55:10Z

ClearSafety
Oct 13, 2024
Author

Hi.
Any solution for this issue?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Font_family does not work in Browser #4121

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Font_family does not work in Browser #4121

ClearSafety Oct 6, 2024

Duplicate Check

Describe the bug

Code sample

To reproduce

Expected behavior

Screenshots / Videos

Operating System

Operating system details

Flet version

Regression

Suggestions

Logs

Additional details

Replies: 2 comments · 2 replies

OwenMcDonnell Oct 7, 2024 Collaborator

ClearSafety Oct 8, 2024 Author

ClearSafety Oct 13, 2024 Author

ClearSafety Oct 13, 2024 Author

ClearSafety
Oct 6, 2024

Replies: 2 comments 2 replies

OwenMcDonnell
Oct 7, 2024
Collaborator

ClearSafety Oct 8, 2024
Author

ClearSafety Oct 13, 2024
Author

ClearSafety
Oct 13, 2024
Author