CODEWITHSUNDEEP
delphifontsdelphi-7twebbrowser
Héctor C.
Héctor C.

Reputation: 505

Trouble rendering custom fonts in TWebBrowser

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:

correct font rendering

And this is how they are rendered by the TWebBrowser:

bad font rendering

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:

DelphiVsFirefox

Upvotes: 0

Views: 107

Answers (1)

H&#233;ctor C.
H&#233;ctor C.

Reputation: 505

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

Upvotes: 0

Related Questions