I see there's been some question in the past about using Font-Awesome.

I need to somehow embed the following reference in the HTML:

  <link href='http://fonts.googleapis.com/css?family=Great+Vibes|Maven+Pro:400,700' rel='stylesheet' type='text/css' />

so that I can then select "Great Vibes" as the font on text.

Having the "real" font displayed at design time isn't critical (as long as it gets displayed in some default font so I can actually see something).

Thanks!

Boris,

<< I see there's been some question in the past about using Font-Awesome.

I need to somehow embed the following reference in the HTML: >>

It won't be much longer until web fonts are supported in the IDE.  Until that time, the only option is to do some post-processing on the emitted HTML loader file for an application.  The rest stays the same with your application.

Tim Young
Elevate Software
www.elevatesoft.com

I'm glad to hear they'll be natively supported.

For now I used a TScript to load a JS file with a function that dynamically adds the Google Fonts to the DOM stylesheets.

Then in the FormCreate I update the <control>.Font.Name to the Google Font name.

Works well enough for now

Boris,

<< For now I used a TScript to load a JS file with a function that dynamically adds the Google Fonts to the DOM stylesheets. >>

Beautiful.

Tim Young
Elevate Software
www.elevatesoft.com

Boris,

Any chance you can share this code ?

Cheers

Max

The content of the JavaScript file is as follows:

var styles = document.createElement('link');
 styles.rel = 'stylesheet';
 styles.type = 'text/css';
 styles.href = 'http://fonts.googleapis.com/css?family=Great+Vibes|Maven+Pro:400,700';
 document.getElementsByTagName('head')[0].appendChild(styles);

where the href is according to the font(s) and size(s) you need.

Drop a TScript component on your form and point its URL to the JavaScript file.

In the form OnCreate method you update the font on the controls in question, e.g.:

Label1.Font.Name := 'Great Vibes';
Label2.Font.Name := 'Maven Pro';

Boris,

> Drop a TScript component on your form and point its URL to the JavaScript file.

thanks for sharing that; works great.

Uli

Boris,

<< The content of the JavaScript file is as follows: >>

Just so you know, you don't really need the JS.  You can use (virtually) the exact same code in EWB directly:

uses WebDOM;

procedure AddFontLink(const AURL: String);
var
  TempElement: THTMLLinkElement;
begin
  TempElement:=THTMLLinkElement(CreateHTMLElement('link'));
  TempElement.rel:='stylesheet';
  TempElement.type:='text/css';
  TempElement.href:=AURL;
  GetHeadElement.appendChild(TempElement);
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
  AddFontLink('http://fonts.googleapis.com/css?family=Great+Vibes|Maven+Pro:400,700');
  Label1.Font.Name:='Great Vibes';
end;

I'm not quite sure that everyone realizes what's in the WebDOM unit.

Tim Young
Elevate Software
www.elevatesoft.com

That's way cooler!

I've seen hints of WebDOM here and there, and it seems to basically expose what we can normally access in JavaScript.

EWB is just so radically different to me, so I'm really quite lost.  And then there's always the best practice way to do something in any programming environment vs hacks and throwbacks to the older familiar ways (like coding in assembler instead of using a Win32 library call).

Tim,

> I'm not quite sure that everyone realizes what's in the WebDOM unit.

That's certainly true, but for the "average" user like me most things
are not obvious unless there are sample projects or technical articles
about that. And even then I can copy your code e.g. and use it, but I
don't understand it.

Actually that's not a problem - EWB2 is a great tool for developers who
don't know much about programming in JS/HTML. At the same time it offers
many possibilities for the experts. Great solution!

Uli