Font family ignored in title (or html) properties for swalOptions

[monique-sti]

const toastOptions = {
    position: 'top-end',
    showConfirmButton: false,
    timer: 6000,
    timerProgressBar: true,
    icon: 'info',
    title: '<span style="font-size: 1.15rem; font-weight: bold; font-family: "Montserrat" !important; ">Title of Toast</span>',
    text: Toast Subtitle,
    color: 'white',
    iconColor: '#03d8d8',
  };

We are setting up the title to include inline styling. Both the font-size and font-weight and are applied but not the font-family.

[pjebs]

Can you first try those options with sweetalert 2 (without electron-alert) and see if it works.

sweetalert2/sweetalert2#846

https://codepen.io/senseofsecurity/embed/ZqORPe/?height=265&theme-id=0&default-tab=js,result&embed-version=2

[pjebs]

I'll then try and incorporate a workaround for electron-alert

[pjebs]

https://stackoverflow.com/questions/8749225/loading-an-external-font-via-inline-css

Bear in mind you can inject things into the BrowserWindow header from the Alert constructor.

[monique-sti]

@pjebs Thanks for the options!

I tried out using the same behaviour with sweetalert2 and it did work.

It does seem like the link for the font is not loading correctly, but we did try it out with the external font via inline css and that did not work either.

There is one other thing though. We also tried adding failovers to the font-family like this:

  title: '<span style="font-size: 1.15rem; font-weight: bold; font-family:  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; ">Title of Toast</span>',

which would technically set it up to Arial or sans-serif as last resort, but it always set up the font with Times New Roman.

We also tried directly setting up the last resort option, sans-serif

  title: '<span style="font-size: 1.15rem; font-weight: bold; font-family:  font-family: sans-serif; ">Title of Toast</span>',

and this way it did work!! We can work with this at the moment, but im not sure why the fall back did not work.

[pjebs]

Maybe that font is not available in the Browser Window. In your other browserwindow's, does the font work?

[monique-sti]

Maybe that font is not available in the Browser Window. In your other browserwindow's, does the font work?

Yes it does!

[pjebs]

title: '<span style="font-size: 1.15rem; font-weight: bold; font-family: font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; ">Title of Toast',

Is there a reason why you have font Family written twice?

[monique-sti]

title: '<span style="font-size: 1.15rem; font-weight: bold; font-family: font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; ">Title of Toast',

Is there a reason why you have font Family written twice?

Sorry! That was a copy error, when testing the font-family attribute is not added twice

[pjebs]

Maybe that font is not available in the Browser Window. In your other browserwindow's, does the font work?

Yes it does!

That's strange because electron alert is just a plain browserwindow with sweetslert2 being displayed in the inside.

[monique-sti]

Maybe that font is not available in the Browser Window. In your other browserwindow's, does the font work?

Yes it does!

That's strange because electron alert is just a plain browserwindow with sweetslert2 being displayed in the inside.

Exactly, but then again, currently we can work with sans-serif. Although, would be nice to have set up a property in the options for the font.

[pjebs]

Did you try injecting style info into head via the Alert constructor. Also, in the constructor, you can enable devtools. Can you enable it and try and manipulate the Dom directly to change the font to see if it recognises the font.

[pjebs]

let alert = new Alert(null, true);
		swalOptions.toast = true;
		if (swalOptions.position === undefined) {
			swalOptions.position = "top-end";
		}
		 alert.fireFrameless(swalOptions, null, true, false, sound, size)

[monique-sti]

I will try that, but first have you had any issues with the usage in Windows?

[pjebs]

No. What are your windows issues. I use it on Mac and windows. I've never changed the font though.

[monique-sti]

Not sure why, but sometimes the toast message does not appear.

We have been testing it on Mac and everything is working correctly.

Now with Windows, the toast has only appeared once. Not sure if its an issue of multiple monitors, but the monitors are mirroring the main display, so it should appear.

[pjebs]

It uses this package: https://github.com/jenslind/electron-positioner

Can you try with another browserwindow using this package if it works on windows?

[monique-sti]

The window is completely fullscreen. We also tried positioning it in the center, but the message does not appear.

[pjebs]

I don't have access to windows at the moment. I mean a brand new (non full screen) BrowserWindow.

[pjebs]

If the window is full screen, the notification is underneath and being covered. You need to set alwaysOnTop to true.

[monique-sti]

We tried out different event emitters. We ended up using the handle/invoke combo (event though the alert does not return anything) which did work.

We were previously using send/once to show it. This works for Mac but not on Windows.

[pjebs]

Should I rewrite electron alert with handle/invoke?

[pjebs]

?