Trouble rendering custom fonts in TWebBrowser

Question

I'm using a TWebBrowser component to render a TinyMCE rich text editor.

This works fine, however, I've found that some of the fonts in the TinyMCE editor are not being rendered as they should.

This is how the fonts are rendered in another browser:

And this is how they are rendered by the TWebBrowser:

The TinyMCE editor is in one of our servers, but the fonts are downloaded from some Amazon cloud storage.

I can't see why this TWebBrowser is failing to render the fonts properly.

Is there a way to see if the font download is failing using the OnDownloadBegin/OnDownloadComplet methods?

I've made a small HTML example

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://htmleditor-fonts.s3.eu-central-1.amazonaws.com/NA/NA.css">
        <style>    
            @font-face {
              font-family: 'N-Bold';
              src: url('http://htmleditor-fonts.s3.eu-central-1.amazonaws.com/NA/Narobial-Bold.ttf') format('truetype');
            }
            p.nb    { font-family: N-Bold }
            p.nb2   { font-family: Narobial-Bold }
        </style>
    </head>
    <body>
        <p>This is a normal paragraph.</p>
        <p class="nb">If this is bold I've successfully downloaded the TTF.</p>
        <p class="nb2">If this is bold I've successfully downloaded the CSS and the TTF.</p>
    </body>
</html>

The linked CSS file looks like this:

@font-face {
  font-family: 'Narobial-Bold';
  src: url('Narobial-Bold.ttf') format('truetype');
}

And a small Delphi project to load this HTML

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, StdCtrls, OleCtrls, SHDocVw;

type
  TForm1 = class(TForm)
    WebBrowser1: TWebBrowser;
    procedure FormShow(Sender: TObject);
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.FormShow(Sender: TObject);
begin
  WebBrowser1.Navigate(url to the html example);
end;

end.

This is the output from Delphi and from another browser, Mozilla Firefox in this case:

Both captures were done from the same machine, the not-integrated browser can get them without trouble. — Héctor C., May 12 '23 at 13:29
Fonts sourced from the web (not in %windir%/fonts) are considered untrusted and often blocked by default especially in more modern web browsers and operating systems. — Brian, May 12 '23 at 14:31
@AndreasRejbrand, I added some code to further expand the issue. — Héctor C., May 15 '23 at 11:50
@Brian the problem is that modern browsers show the fonts, but not the TWebBrowser component — Héctor C., May 15 '23 at 11:51
A `TWebBrowser` is an embedded Internet Explorer. Internet Explorer is a very old browser. It hasn't been updated since 2013. Most modern web pages cannot be displayed properly in Internet Explorer. Try to open your page in Internet Explorer and you'll likely see that it fails just like in the `TWebBrowser`. — Andreas Rejbrand, May 15 '23 at 12:21
@AndreasRejbrand I've been investigating further. The font I was using was TTF and Internet Explorer has no support, so I wasn't able to see it, just as you said. So I converted the font to WOFF. Now, my Windows internet explorer shows the HTML as it should be, because it's a IE11. But TWebBrowser is running a IE7 version, so no support to WOFF files either. — Héctor C., May 15 '23 at 13:08
@HéctorC.: Great. IIRC, you can force the `TWebBrowser` to emulate a newer version of Internet Explorer using a registry hack or something. — Andreas Rejbrand, May 15 '23 at 13:10

score 0 · Accepted Answer · answered May 18 '23 at 06:16

Finally solved this problem, it needed a two pronged approach.

The main issue is the underlying Internet Explorer 7 that the component is using. This browser doesn't have support for the TTF fonts I was trying to show.

Newer versions of IE have support of WOFF fonts, so I switched the font type, and then used this answer to force TWebBrowser to run in IE8 compatibility mode:

https://stackoverflow.com/a/12488739/4105601

Trouble rendering custom fonts in TWebBrowser

1 Answers1