I have a mind mapping app that has been running well on Android for a few years now. I have been trying to publish it for iOS and MacOS for some time now. On iOS (as an app) and MacOS (in the browser for testing) I have a problem with the export. The app is a project in Angular, Cordova, Typescript. The problem only occurs in the Safari browser, which is also used in the Cordova version for iOS. I was able to test it on my Mac and an iPhone. The error does not occur on the Mac in Chrome.
The error
If I export a mind map that contains images as an image (.png), the images of the nodes are not displayed in the exports. Everything else in the map is exported correctly, only the images are missing. Only when I export the map three times are the images present in the export. If I add a new image and export it again, the image is only visible in the exported image after 3 exports. It is interesting that the export as SVG, which I also offer, contains the images of the nodes. So the SVG string that I create has all the necessary information.
The base
The mind map consists of various things. HTML and CSS for the frames, lines etc... The images of the nodes are saved as Base64 and each node is in a Foreign Object.
Example of the SVG export
Mindmap with 2 nodes and the Base64 characters of the node images have been replaced with XXX.

This is how I create the .png file to be exported.
I can view all this content in the map view of the app. When exporting to an image, I take this information, turn it into an SVG, have the browser draw it on the canvas and then output it as a graphic. Something must be going wrong at this point.

private exportAsImage( mindMap: MindMap, scale?: number, type: string = "png" ): Observable { return new Observable(o => { this.progress.start(this.progress.PROGRESS_MAJOR); this.mmpMap.export(this.mapVizService.getExportClassList(mindMap), (svgStr: string) => { this.exportService.imageFromSVGString(svgStr, type, scale).pipe( switchMap(img => of( Utils.dataURItoFileObject( img.dataUri, `${Utils.sanitizeFilename(mindMap.title)}.${type}` ) ) ), switchMap((fileObject: FileObject) => this.mapsService.saveAsTemp(fileObject, true, { message: this.translate.instant("mdz.mindmap.saveas.message"), // subject: this.translate.instant("mdz.mindmap.saveas.subject"), subject: fileObject.name, url: `www.myURL.com` }, true) ) ).subscribe(() => { this.progress.stop(this.progress.PROGRESS_MAJOR); o.next(); o.complete(); }, err => { this.progress.stop(this.progress.PROGRESS_MAJOR); o.error(err); o.complete(); }); }) }); } 

What I have already tried.
I have already tested various things such as time delays etc..., none of which change anything. It seems to me that it's a combination of the caching and the order or speed at which the images are loaded. Only the speed can't be, because built-in delays don't change anything.
My guess
But it must have something to do with Safari because on the Mac in Chrome it runs without problems... Maybe it can't handle so many base64 images or it exports faster than it renders? Whereby the SVG export contains all the information and when I open the SVG, all the content is also displayed in the browser in seconds. So something must happen when painting on the canvas and outputting as an image.
It doesn't really make sense, I'm really at the end of my ideas. What can you do?
I really hope you can help me. A mind mapping app without image export makes little sense. And since the app otherwise works great, I'm really getting desperate. :(
Thanks a lot!
Rob

I have never done any custom fonts or anything like that thing over the years so this is the first time I'm trying.
My website uses the WordPress theme called jannah.
Ain't that typography option of the theme options it has an option for Google phones theme default and custom fonts so why not try it you know and I try to load a font and it's not letting me upload it it's a ttf and the other option is woff.
So why isn't WordPress allowing me to use those fonts.
Not the end of the world of course and accused Google phones or the team default funds and so forth but I just want to know why WordPress isn't letting me upload couple of files on my own website

Roblox has made an announcement about it here: Introducing Builder Font + Deprecating Gotham and Arial but it doesn’t look like they specified why.

Source: NixOS Wiki - Fonts
Just wanted to post a solution for noobs such as myself as it took me a while to figure out how to setup the font packages in my configuration properly.
Turns out fonts need to be installed in a different way to other packages as can be seen on the wiki page.
Rather than just:

environment.systemPackages = with pkgs; [ nerdfonts ]; 

Instead it's:

fonts.packages = with pkgs; [ nerdfonts ]; 

There's also being able to configure the nerdfonts package to only install what you want which you can read in the wiki page source above. Here's an example:

fonts.packages = with pkgs; [ (nerdfonts.override { fonts = [ "FiraCode" "AnyOtherNerdFont" ]; }) ]; 

For a full list of fonts go to: Nerd Font Downloads.
Just remember it will be just one word without the "Nerd Font" at the end such as just "IntoneMono".
Console (tty) fonts are a little different but were very obtuse for me to find how they're supposed to be setup since they aren't covered in the wiki article and there's no article on console setups.
I only figured it out by looking at the console option on the NixOS option search. It feels like I stumbled on it by accident as I looked around for a long time to find a solution while trying different stuff to no avail.
There are two main hurdles to setting up console fonts like Terminus correctly.

1. You have to be using the right font type package.
   • Using Terminus, as an example, don't accidently be using fonts like terminus_font_ttf or terminus-nerdfont as they aren't made for a TTY. Unless you want to try the experimental console kmscon but good luck making everything work properly.
2. You must install the package with console.fonts not with fonts.packages like regular fonts.
   • Otherwise the fonts won't be properly symlinked to the /etc/kbd/consolefonts/ directory. This is necessary because the tool that NixOS uses makes use of the setfont CLI tool which only looks in that directory. I only found that out looking at the same error many times.

It seems like a lot to keep in mind but it's pretty simple once you know what to do. To demonstrate I'll show my entire console configuration using a Terminus font I like which I've seen is popular for a reason.
Console setup:

console = { font = "ter-124b"; keyMap = "us"; packages = with pkgs; [ terminus_font ]; }; 

That's it!
As a bonus tip if you're just starting out notice that you can combine different options into one block without having to repeat yourself. However, if you want to do it that way that's fine and here's how it looks:

console.font = "ter-124b"; console.keyMap = "us"; console.packages = with pkgs; [ terminus_font ]; 

You can nest options as much as you want but this is a good one to start with as it's just one nesting deep.
I hope you find this useful so as to not find yourself banging your head for hours for what will only take a minute once you know what to do.
Perhaps there are other ways that your fonts aren't working but I hope this helps with at least getting started with your troubleshooting.

Hello! I have the .ttf file of a font I'd like to use on my s24, I have it downloaded on there any everything, is there an app where I can upload that file and then change my phone font to it? Thank you!