Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 10 of 13 total
Thread Using Google Fonts
Thu, Jul 16 2015 5:44 PMPermanent Link

Boris B

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!
Wed, Jul 22 2015 6:01 AMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

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
Thu, Jul 23 2015 3:40 PMPermanent Link

Boris B

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 Smile
Thu, Jul 23 2015 5:56 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

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. Smile

Tim Young
Elevate Software
www.elevatesoft.com
Thu, Jul 23 2015 8:45 PMPermanent Link

Max Evans

Boris,

Any chance you can share this code ?

Cheers

Max
Fri, Jul 24 2015 8:42 AMPermanent Link

Boris B

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';
Fri, Jul 24 2015 10:01 AMPermanent Link

Uli Becker

Boris,

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

thanks for sharing that; works great.

Uli
Fri, Jul 24 2015 4:37 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

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. Wink

Tim Young
Elevate Software
www.elevatesoft.com
Fri, Jul 24 2015 5:14 PMPermanent Link

Boris B

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).
Sat, Jul 25 2015 4:51 AMPermanent Link

Uli Becker

Tim,

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

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. Smile

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
Page 1 of 2Next Page
Jump to Page:  1 2
Image