How to get a WebGadget to load a font resource?

Mistrel · Post by **Mistrel** » Sat Dec 28, 2013 3:48 am

On Windows, I'm having a lot of trouble getting a web gadget to load a font resource. This is more a problem with Internet Explorer than PureBasic itself, however PB is inheriting this problem by design.

My css is:

Code: Select all

@font-face {  
   font-family:AFont;  
   src:url(file://c:/testfont.ttf);
}

html,body {
   font-family:AFont;
   font-size:12pt;
}

Also tried:

Code: Select all

src:url(c:/testfont.ttf);

Code: Select all

src:url(testfont.ttf);

I also tried loading the font as an application resource with AddFontMemResourceEx() so that I could refer to it locally:

Code: Select all

src:local(testfont);

All of the non-local css examples are confirmed to work with Chrome but do not work with Internet Explorer. How can I reference a font resource in a web gadget which is not available on the system?

Mistrel · Post by **Mistrel** » Sat Dec 28, 2013 5:38 am

The following works but only if the font is installed on the system:

Code: Select all

font-family:"Font Name";

However, this means that the application will need to be installed and most likely invoke administrator permission to do so.

Still looking for a user mode solution.

Mistrel · Post by **Mistrel** » Sat Dec 28, 2013 6:00 am

Mystery solved.

When running the embedded web gadget of Windows 7, the web control is derived from IE 8. Font formats .ttf and .otf are unsupported. As of IE9, .woff is supported, but even after installing IE9 or higher, the embedded control still uses the old renderer; at least PureBasic does.

However, IE8 and earlier support Embedded OpenType (.eot) and this DOES work when loaded from disk! This is described on MSDN for the "@font-face rule":

http://msdn.microsoft.com/en-us/library ... s.85).aspx

This feature enables you to use specific fonts that might not be available on your local system. In Internet Explorer 8 and earlier, the URL must point to an Embedded OpenType (EOT) file (.eot or .ote format). No other font formats are supported.

IdeasVacuum · Post by **IdeasVacuum** » Sat Dec 28, 2013 8:18 am

Well, given that EOT has already been superseded by WOFF, and that EOT is limited to IE, it's probably easier to distribute the ttf, given that installation of a font is trivial anyway.

Shield · Post by **Shield** » Sat Dec 28, 2013 8:53 am

Just register the TTF file on program startup as a font (AddFontResourceEx_()).
I didn't test it, but I think it should work.

-> To refer to it, it should be enough to just write the name.
Do note that the name might differ from the filename, this might be why your attempt didn't work.

Mistrel · Post by **Mistrel** » Mon Dec 30, 2013 3:15 pm

Shield wrote:Just register the TTF file on program startup as a font (AddFontResourceEx_()).
I didn't test it, but I think it should work.

I mentioned this in my post. I used AddFontMemResourceEx_() which is the same thing. I can confirm that the font loads by using it in an editor gadget but it does NOT work with the web gadget. I thought the same thing. It SHOULD work! But it does not.

IdeasVacuum wrote:Well, given that EOT has already been superseded by WOFF, and that EOT is limited to IE, it's probably easier to distribute the ttf, given that installation of a font is trivial anyway.

You might think so but then the application is not guaranteed to run as expected if the user does not have permission to install system-wide fonts. This is what AddFontResourceEx and AddFontMemResourceEx are for. Unfortunately, they do not appear to work with an IE ActiveX control.

Shield · Post by **Shield** » Mon Dec 30, 2013 4:07 pm

It works perfectly fine:

Code: Select all

EnableExplicit

Define filename.s = "Romanesco-Regular.ttf"
Define fontname.s = "Romanesco"

AddFontResource_(filename)

OpenWindow(0, 0, 0, 400, 400, "")
WebGadget(0, 0, 0, 400, 400, "")
SetGadgetItemText(0, #PB_Web_HtmlCode, "<html><head><style>#foobar{font-size: 32pt; font-family:'" + fontname + "';}</style></head><body><div id='foobar'>Hello World</body></html>")

Repeat
	If WaitWindowEvent() = #PB_Event_CloseWindow
		Break
	EndIf
ForEver

RemoveFontResource_(filename)

naw · Post by **naw** » Mon Dec 30, 2013 5:49 pm

You can use Google fonts if your App is internet connected:

<HEAD>
<LINK HREF='http://fonts.googleapis.com/css?family=Poller+One' REL='stylesheet' TYPE='text/css'>
<STYLE>
BODY { font-family: 'Poller One'; }
</STYLE>
</HEAD>

<BODY>
<H1> Test </H1>
</BODY>

Mohawk70 · Post by **Mohawk70** » Mon Dec 30, 2013 11:25 pm

cover more browsers

@font-face
{
font-family: 'MyFont';
src: url('myfont.eot'); /* IE9 Compatible */
src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('myfont.woff') format('woff'), /* Modern Browsers */
url('myfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('myfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

PureBasic Forums - English

How to get a WebGadget to load a font resource?

How to get a WebGadget to load a font resource?

Re: How to get a WebGadget to load a font resource?

Re: How to get a WebGadget to load a font resource?

Re: How to get a WebGadget to load a font resource?

Re: How to get a WebGadget to load a font resource?

Re: How to get a WebGadget to load a font resource?

Re: How to get a WebGadget to load a font resource?

Re: How to get a WebGadget to load a font resource?

Re: How to get a WebGadget to load a font resource?