[Plugin] : WebFonts (display webfont inside C2)

Post your completed addons to share with the community

Post » Tue Nov 29, 2011 3:51 pm

Edit : added the URL for the plugin archive itself, silly me...

Following the work on the HTMLDisplayString, I made a quick plugin to display Webfonts inside Construct 2.
Inside Construct :
And inside a browser :

(tested with FF and Chrome, by the way).
The URL for the demo : http://dl.dropbox.com/u/1412774/WebFontC2Plugin/index.html
The capx : http://dl.dropbox.com/u/1412774/WebFontC2Plugin/webfontc2plugin.capx (the demo also use the CallJS plugin to display an 'alert', but it's not needed to just use the Webfont plugin).
The plugin : http://dl.dropbox.com/u/1412774/WebFontC2Plugin/pode_webfontv1.zip
As you can see, you can style everything via CSS (and even use images as background via background url() !)
With a bit of ingeniosity, you can also embed some classic HTML string inside...

To make it works, you need to provide the name of the css file which contains the @font-face declaration.
You also need to provide the type of HTML element in which the webfont is going to be injected (for example p), and you need to give that tag an ID (for example myp).

You also need to declare a CSS file, and to place it at the root of your exported game (that means that you can't see anything when previewing the game, only at export). Something like that.
Depending on where is your webfont, you will also need to perhaps put it at the root of your game, next to the css...

By the way, I have no rights on the webfont used as an example, so don't use it for anything commercial, you could break some licence...Pode2011-11-30 10:59:13
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Tue Nov 29, 2011 4:06 pm

I'm quite fond of @webfonts--great work, trying it out now!
B
20
S
5
G
7
Posts: 151
Reputation: 4,830

Post » Wed Nov 30, 2011 10:46 am

A quick notice : since the Webfont aren't part of the C2's canvas per se, you can't rotate them (or apply any filter as well) inside C2. You need to specify them inside the css. Don't forget your browser vendor specific prefix !
(For example, to rotate text 67 :
[quote]
-webkit-transform: rotate(-67deg);
-moz-transform: rotate(-67deg);     
[/quote])
And with a picture :
Pode2011-11-30 10:47:49
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Wed Nov 30, 2011 10:50 am

How to download this plugin?
Last edited by rexrainbow on Wed Jul 13, 2016 5:29 am, edited 1 time in total.
B
97
S
22
G
178
Posts: 4,121
Reputation: 104,049

Post » Wed Nov 30, 2011 11:01 am

My bad ! I'm an airhead... The link is up in the original post, now...
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Wed Nov 30, 2011 11:16 am

Great job!
B
106
S
27
G
8
Posts: 209
Reputation: 12,525

Post » Wed Nov 30, 2011 11:22 am

Nice plugin thanks.
B
40
S
14
G
11
Posts: 243
Reputation: 9,432

Post » Wed Nov 30, 2011 1:54 pm

Nice plugin ! But... No way to make it work in preview mode ? :(
B
58
S
13
G
10
Posts: 632
Reputation: 12,505

Post » Wed Nov 30, 2011 3:00 pm

@Kiyoshi: it's not possible with C2 for the moment (at least not the way C2's core is implemented).

And, for everyone that needs that information : the text is still selectable (great in some cases, not great in other cases). But, since it's generated dynamically, I'm not sure that robot crawlers and accessibility devices are going to play well with that !
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Tue Jul 24, 2012 1:15 am

Oh man, this is brilliant. Thanks so much! :D

Can i @import google fonts with it?megatronx2012-07-24 01:17:05
My professional Royalty Free Music at Scirra Assets Store
--------------------------------
Specs: i5 2500, 16gb of ram, gtx 770, win 7, Focusrite Scarlett 8i6, Mackie mr8mk2, Alesis 320, browsing the net on chrome.
B
71
S
19
G
19
Posts: 1,919
Reputation: 16,910

Next

Return to Completed Addons

Who is online

Users browsing this forum: matriax and 2 guests