Graphics.TextWidth can't see Font imported in App Header

I’m trying to get the width of a string using Graphics.TextWidth, which works if I specify a font installed on my system, however it’s not seeing fonts imported when the App starts. I’m using some Google fonts and WebListBoxStyleRenderer’s to stylize text on the page, which works great, however when I pass the Google Font name to the g.FontName it doesn’t ‘see’ it. Is there a way to access font information that’s loaded into the WebApp?

Var d As Double
Var p As New Picture(100, 100, 32)
Var g As Graphics = p.Graphics
g.FontName = "Roboto Condensed" // doesn't see this font, but sees system fonts just fine
g.FontSize = 14
d = p.Graphics.TextWidth(s)

// And here’s the header entry. Thanks for your advice!

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style>.Roboto+Condensed {font-family: 'Roboto Condensed', sans-serif;}</style>

From what I understand the fonts must be installed on your server for the graphics to see it.

If you use Lifeboat I think it has an option/directory to install fonts on the server.

2 Likes

This. Adding a font using HTML (in App.HTMLHeader or otherwise) instructs the client browser to download the font and make it available for your content on the page, but has no effect on the server. Including Pictures, PDFs, etc.

2 Likes

Here’s a little background on this…

At the time of writing, the graphics context on web browsers did not have a way to calculate the width of a string or to wrap text to a width. To keep the API consistent, text width was computed on the server and attempted to use the same font (by name) that was specified in the code and text wraps were simulated. If the font isn’t found, it would fallback to some common fonts.

It’s documented somewhere, but you need to have at least the base system fonts installed to do that plus any custom fonts that you want to use.

Thanks Anthony/Greg: I use XOJO Cloud for my hosting so I’ll work the solution from that end. This is an excellent design consideration that I will note in my App(s). If/When the client moves their app from a XOJO server to another server the Font settings need to be flexible enough to facilitate the change.

Follow-on Question: Are there any easy tricks to ‘test’ if the host/server does in fact have a font installed on it? (or get a list of supported fonts?)

Assuming Linux server:

Open the terminal (SSH?)

check if the fc-list command is available, if it is, it will list them

If not, a

ls -R1 /usr/share/fonts /usr/local/share/fonts ~/.fonts ~/.local/share/fonts

will list the places fonts system wide and user fonts are copied to and its filenames.

IIRC, on Xojo Cloud there’s a folder that you can add fonts to which is accessible from SFTP. Put a TTF file of your font in there.