@font-face

[r3za]

Hello all,

@font-face Extension:
Here is an extension to support any type of font on any device or browser. All fonts are saved on your server and you do not relay on any external link etc. Basically it does bullet proof your web fonts.

The extension supports:
TTF for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone



here is the demo:
http://www.virtualdesigners.co.uk/proje ... font-face/
http://virtualdesigners.co.uk/projects/ ... font-face1

This extension is for free of charge for now and you can download it including Help document from below links:

WB Version 7.X and 8.1
http://www.virtualdesigners.co.uk/proje ... .x-8.1.zip

WB Version 8.2
http://www.virtualdesigners.co.uk/proje ... ce-8.2.zip

Please email me your thoughts and feedback
reza@virtualdesigners.com

P.S. I have tested with 7.x, 8.1 and 8.2 and and it works sweet. I believe it does need more tweaking and work to make it with more options and more friendly which I will be doing in next version. but I think for now it does the basic job.

[stamjoe]

Reza thanks, its very usefull.
Its working with WB 8.2? Did you update it?
Joe

[r3za]

Hello Joe,

This is updated for 8.2 now.
thanks

[BaconFries]

@r3za you may have to provide two versions of the extension why I hear you ask it you build the extension with EB4.0 then then it can only be used with WB8.2 so any user that is using any earlier version of ie WB 8.1.5 and below will not be able to use unless they update.

[r3za]

Yes, Actually when I build with E.B 3 it works with all versions but HTML rendering doesn't work with the actual extension when you add it to the page which is quite useful. Best practice as you said it is two versions. Thanks BaconFries for the heads up.

[me.prosenjeet]

Best is make it on EB 2.6, that way it works on WB 7x and WB 8x

[r3za]

Hello Prosenjeet,
E.B 2.6 didnt work for WB8.2 as the concept is different. I have used E.B 2.6 to build WB 8.1 and below and E.B. 3.0 for 8.2. This was only to make sure it is covered all options inc. Live HTML rendering.
thanks for feedback!

[me.prosenjeet]

I had mailed Support about this and I have his confirmation that all extensions made with EB2.6 or above will work with WB 8.2 and above. Only that extensions built with EB4 will work ONLY on 8.2 and above.

[r3za]

Thanks Prosenjeet. I will email as well. the problem is when i use the extension that is built with 2.6 for WB 8.2, it force the fonts to the ./fonts folder even though the code is not actual ./fonts and its root and from other side if on version 8.1 and lower, if i change the fonts directory to ./font in the code, it does not output the actual font files to fonts folder. so each way has disadvantage. when also I use EB3, it works for both versions but HTML LIVE rendering fails for for 8.2 which is quite useful for this purpose.

[zinc]

@Reza Great stuff but do you have a live site that demonstrates this extension's capabilities?

[r3za]

hi Bendigo, Here are two links which one is a plain example and for other one I have user one of Pablo's templates:
http://virtualdesigners.co.uk/projects/ ... font-face1
http://virtualdesigners.co.uk/projects/ ... @font-face

[haakoo]

Hi Reza,

Don't know if you use these options in your extension(haven't tried it yet)

The last comment on following page.
http://www.brianhadaway.com/font-face-d ... d-devices/

Oh and here's a converter for fonts to use with your extension.
For the extra options for other devices
Use the expert option http://www.fontsquirrel.com/fontface/generator


Hans

[r3za]

hi Haakoo,
thanks for the feedback. yes the extension works with Android and it covers the link.

[haakoo]

Glad to hear that it does.
Now only converting my ttf to other formats

Hans

[Adendum]

How does this differ from the in-built @font-face ?

[haakoo]

Paul,

When you watch your site on an android or iphone/pad the normal fontface isn't working
the extension that is= .eot
on different platforms you need different supported extensions like .woff,svg
Maybe Pablo might consider to put this in by default?
I know it would mean a bigger file.
But the support for tablets and smartphones must also be up to date as it would kill your site-estethics


Hans

[zinc]

How does this differ from the in-built @font-face ?

I did not have much luck with the built in as it did not work on iPad/Mac.

[Adendum]

I don't have an Android phone but I can view my own site on an iPad and an iPhone and the Papyrus font seen in the headings is fine. So the inbuilt @fontface appears to be working as far as I can see. But I do remember Pablo saying that not all fonts will work in @fontface, so maybe your experiences were with incompatible fonts?

[zinc]

Yes it would seem so. Customer subsequently
Dropped the request.

[haakoo]

I don't have an iPad/phone,so can't tell
But for some browsers eot alone doesn't work
I do test before to use a font to make sure.

Hans

[haakoo]

@Bendigo

Take a look here for troubles that might occur http://www.fontsquirrel.com/blog/2010/1 ... e-problems
And more explanation about fontface here http://www.fontsquirrel.com/blog/2010/1 ... e-problems

Hans

[zinc]

Thank you Hakoo. I will take a look but for the next project I will be trying Reza's extension for the job and see how it goes.

[haakoo]

Yes I would use that extension too, but you still need the other @fontface files.
like the svg,woff as explained in the links posted in my prev post

Hans

[r3za]

i just need some information. i tried downloading the extension but it doesn't appear in the list of the installed ones... why??

Please use below links to download. not sure why it does not appear.

[tommy888]

Great work,man.Truly appreciate your commitment.

[jason]

Hi, Just tried to install @font-face on 8.2.1 but seems not able to install at all. Do you have the 8.2.1 extension for this as well? Thanks a lot.

[r3za]

Hi, Just tried to install @font-face on 8.2.1 but seems not able to install at all. Do you have the 8.2.1 extension for this as well? Thanks a lot.

hi Jason, have you tried this link: http://www.virtualdesigners.co.uk/proje ... ce-8.2.zip

[jason]

Dear Reza,

Thanks a lot. Initially it didn't work as I am using the Unicode version with file extension uwbx. I managed to solve this problem by using the extension builder to convert the wbx extension file to the uwbx file which will work in unicode version. And it really works like a charm. Thanks a lot, Reza.

[frankus]

Your @font-face seem not working for me. You didn't explain well whether by just placing it on a page will work on the whole text on the page that uses the font or just works only for what is written inside its property.

[r3za]

Your @font-face seem not working for me. You didn't explain well whether by just placing it on a page will work on the whole text on the page that uses the font or just works only for what is written inside its property.

Hello Frankus, strange that you could not manage to work it out. this is for defined heading or paragraohs within the extension.
1- simply drag and drop the extension to where you want to have the text
2- enter font name
3- browse to fonts per screenshot
4- you caneither enter a heading or paragraph or both e.g. if you enter a heading and leave paragraph blank, it does show heading only with new font.

Please let me know how you getting on.

Reza

[frankus]

What of bulleted text?
If you can make this extension in a way that when it is just pasted on a page it affects all the text on a page that uses the same font, it will very good.

[r3za]

Your @font-face seem not working for me. You didn't explain well whether by just placing it on a page will work on the whole text on the page that uses the font or just works only for what is written inside its property.

Hello Frankus, strange that you could not manage to work it out. this is for defined heading or paragraohs within the extension.
1- simply drag and drop the extension to where you want to have the text
2- enter font name
3- browse to fonts per screenshot
4- you caneither enter a heading or paragraph or both e.g. if you enter a heading and leave paragraph blank, it does show heading only with new font.

Please let me know how you getting on.

Reza

mine will probably be the most stupid question ever, i know
but.. can i just use the font by writing my text in the heading/pharagraph space?
if so, what if i need words in bold, or text which is centerd etc etc? thank you very much for what you are doing

Hello Givi20,
This works with where you have dropped the location and I am not sure if I could bold or center it as it will loses some major functions.

Regards,

[protectourlands]

I recommend rendering the text as an image, then apply your font.

Right Click > Object properties >Publish text as image

Use GIF optimized for best quality and apply your background color as the transparency color.

[protectourlands]

The reason you are having issues with the text is the text frame spacing. Large text produces large spacing.

You really should render it as an image. If you choose GIF optimized you get an image with a transparent background. This way it will not matter what is behind it.

Or you can use a graphics program to build this image from your text and import it into WB.

What is the font? I can build it for you if you don't have an app for this.

[protectourlands]

Cursive fonts like the one you have chosen have built in spacing, so using them large will always introduce larger spacing. This may explain it.

But you don't have to eliminate the background. If you build the image in PNG or GIF with transparent background, you can set it over anything you wish. I will be glad to build it for you and send via email. Just let me know what the font is.

[protectourlands]

Perfect! That's exactly how to do it. Now it will display properly in all scenarios.

[r3za]

This is working for headers and text and such in 8.5.7, but is there any way to use a non web-safe font in a marquee? I really need this. I've been developing websites for nearly 10 years now, but I know nothing about CSS. I'm outdated. Thanks a lot to whoever can help me.

Hello there and thanks for the question. I am not sure if I understand you. do you have skype? if so please add reza__admin (there are 2 underscores) or email me your full request to virtualdesigners@london.com