Poppins Font on non web connected device

Targets Web
1

Hi all,
I’m creating a new UI under web 2.0 and so far am enjoying the process especially using the Graffitisuite libraries.

I’m wondering if there is a way to embed my font internally to my web 2.0 app? I seem to see the poppins font in the IDE, but when I run either in debugger or as a built app, I seem to see a font more like times new roman when loaded in Safari… I’ll be working with an offline web server so can’t pull down fonts at run time.

Am I doing something wrong?

1 Like
2

Hi James,
You can only use fonts that are installed locally on client machine, or hosted somewhere accessible like Google Fonts.

3

I imagine that if the font file itself is available and the licenses allow such a thing that you could download the file and include it in the project. Make it into a webFile in the app and make it available through the handle url event. I would probably try to wrap it as a non-control plugin so that I could send it up via the load libraries event but you could also add the link to it in the extra headers portion. Then it would be served from your own server and not require a valid connection to the internet as a whole to work.

4

For best performance, you really shouldn’t host static resource files like this using a Xojo WebFile. If you have the appropriate license to use the font, put it in a directory that’s served from a traditional web server and link it in App.HTMLHeader, you can also fine-tune caching to reduce load times for the browser and data transfer via the Apache HTACCESS or nginx config. Host on the same domain to dodge a lot of issues with CORS:

<style>
	@font-face {
	  font-family: SomeFont;
	  src: url(://domain.com/path/to/font/fontName.ttf);
	}

	div {
	  font-family: SomeFont;
	}
</style>

Relevant reading

If you use Xojo Cloud, I believe you have a directory where you can place static files and reference by URL.

5

That said, Poppins is hosted by Google, so you can just add this to your App.HTMLHeader:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
6

Thanks for the feedback guys.

The interesting thing is that in 2021.1. Poppins is showing up fine in the ide but when I debug on the same machine it’s not using it. Is the ide using one of the above tricks that doesn’t automatically translate to the built app?

7

Yeah, the IDE draws everything itself, it’s not a WebView (so the results aren’t always the same).

8

They keep saying this :wink: But for those of us that work inside of networks that may not always have easy access to the net, or need to be able to do initial setup of things in remote locations without internet access there is no other choice. And honestly I’ve been doing the same for years with web 1 and 2 and it really does not cause any trouble except that it gives Greg a heart attack every time I post about doing it :wink: Generally if you need to do this you’re in a limited use environment as well, so you’re not going to be serving it up a thousand times all at once, but only going to be handling a few users at a time max anyway. I would not be worried about this for small numbers of users but only if you are going to be serving to thousands that way.

9

The problem is how slowly the Web framework transfers the files, in my experience. That’s why, for those limited scenarios you mention, I setup a basic intranet Apache instance to serve the static files.

10

If I do recall correctly, Tim Parnell’s Lifeboat does exactly this for Cloud. Sets an NGINX for multipurpose use, including reverse proxy for instances, and serving static (like fonts and images) and dynamic (php) content in parallel to Xojo Web. Maybe an “intranet” feature (installing apps in user’s servers) could not be very hard to be created too.

1 Like
11

You guys are right! You should not do this. Unfortunately the question as posed means there is no other choice. In my own case there is also no other choice. Just because this is not the best solution in the best of all possible worlds doesn’t mean it is the one that absolutely and without exception has to be used in other worlds. I’m glad you guys can just startup any services or servers on whatever ports you want and don’t have to worry about NAT pass throughs or anything else! You guys rock for not having any limitations on what you do. For other folks as in the original question where there is no internet access and yet it still needs to work this is not a solution. So stop telling me I shouldn’t do it. I know it’s not as fast. The other option is to not work at all, not just take some number of milliseconds longer.

12

Thanks all,
James is right. In my application I’m serving to a single user on an iPad and have fixed hardware and a local network. Very controlled environment and would love a simple solution to embed a font on page load.

1 Like
13

OK, I’ve put together a simple example showing how you can do this without an external server. There’s no error checking. It injects CSS in to the <head> of the page that contains the @font-face definition for the Poppins font. Additional work required if you want to support other variants of Poppins or other fonts.

Once you’ve called LoadFont, you can apply it to a control like so:

me.Style.FontName = "Poppins"
2 Likes