@font-face

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
Post Reply
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

@font-face

Post by 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


Image

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.
Last edited by r3za on Sat Oct 26, 2013 11:33 am, edited 9 times in total.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
stamjoe
 
 
Posts: 230
Joined: Sat Feb 09, 2008 10:32 am
Location: GREECE

Re: @font-face

Post by stamjoe »

Reza thanks, its very usefull.
Its working with WB 8.2? Did you update it?
Joe
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by r3za »

Hello Joe,

This is updated for 8.2 now.
thanks
Last edited by r3za on Tue Jun 12, 2012 6:47 pm, edited 1 time in total.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
BaconFries
 
 
Posts: 5621
Joined: Thu Aug 16, 2007 7:32 pm

Re: @font-face

Post by 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.
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by 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.
Last edited by r3za on Tue Jun 12, 2012 6:48 pm, edited 1 time in total.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
me.prosenjeet
 
 
Posts: 1267
Joined: Mon Dec 24, 2007 1:50 pm
Location: Lucknow
Contact:

Re: @font-face

Post by me.prosenjeet »

Best is make it on EB 2.6, that way it works on WB 7x and WB 8x
Check the new Chat GPT and Malware detect extensions at the link below

Check my WB Extensions
Check my WB Templates
---------------------------------------------------------
www.Lucknowwebs.com
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by 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!
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
me.prosenjeet
 
 
Posts: 1267
Joined: Mon Dec 24, 2007 1:50 pm
Location: Lucknow
Contact:

Re: @font-face

Post by 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.
Check the new Chat GPT and Malware detect extensions at the link below

Check my WB Extensions
Check my WB Templates
---------------------------------------------------------
www.Lucknowwebs.com
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by 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.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
zinc
 
 
Posts: 2154
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: @font-face

Post by zinc »

@Reza Great stuff but do you have a live site that demonstrates this extension's capabilities?
Running WYSIWYG Web Builder since 2007...
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by 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
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Re: @font-face

Post by 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
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by r3za »

hi Haakoo,
thanks for the feedback. yes the extension works with Android and it covers the link.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Re: @font-face

Post by haakoo »

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

Hans
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: @font-face

Post by Adendum »

How does this differ from the in-built @font-face ?
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Re: @font-face

Post by 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
User avatar
zinc
 
 
Posts: 2154
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: @font-face

Post by zinc »

Adendum wrote: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. :(
Running WYSIWYG Web Builder since 2007...
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: @font-face

Post by 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?
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
zinc
 
 
Posts: 2154
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: @font-face

Post by zinc »

Yes it would seem so. Customer subsequently
Dropped the request.
Running WYSIWYG Web Builder since 2007...
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Re: @font-face

Post by 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
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Re: @font-face

Post by 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
User avatar
zinc
 
 
Posts: 2154
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: @font-face

Post by 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.
Running WYSIWYG Web Builder since 2007...
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Re: @font-face

Post by 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
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by r3za »

givi20 wrote: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.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
tommy888
 
 
Posts: 204
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: @font-face

Post by tommy888 »

Great work,man.Truly appreciate your commitment.
jason
 
 
Posts: 11
Joined: Wed Aug 08, 2012 2:51 pm
Location: Singapore

Re: @font-face

Post by 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.
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by r3za »

jason wrote: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
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
jason
 
 
Posts: 11
Joined: Wed Aug 08, 2012 2:51 pm
Location: Singapore

Re: @font-face

Post by 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.
User avatar
frankus
 
 
Posts: 38
Joined: Sat Dec 05, 2009 10:04 pm

Re: @font-face

Post by 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.
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by r3za »

frankus wrote: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
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
frankus
 
 
Posts: 38
Joined: Sat Dec 05, 2009 10:04 pm

Re: @font-face

Post by 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.
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by r3za »

givi20 wrote:
r3za wrote:
frankus wrote: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,
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
protectourlands
 
 
Posts: 426
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: @font-face

Post by 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.
User avatar
protectourlands
 
 
Posts: 426
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: @font-face

Post by 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.
User avatar
protectourlands
 
 
Posts: 426
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: @font-face

Post by 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.
User avatar
protectourlands
 
 
Posts: 426
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: @font-face

Post by protectourlands »

Perfect! That's exactly how to do it. Now it will display properly in all scenarios.
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: @font-face

Post by r3za »

iNsaneOS wrote: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
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
Post Reply