Web Fonts

Please try to keep all the discussions in the main forums on topic! If you have anything else, related to fonts, you want to share, please post it here!
Erwin Denissen
Moderator
Moderator
Posts: 6670
Joined: Fri Oct 04, 2002 12:41 am
Location: De Bilt, The Netherlands
Contact:

Web Fonts

Post by Erwin Denissen » Wed Nov 12, 2008 12:00 pm

Technologies that allow custom fonts (to some extent) in web pages:

Scalable Inman Flash Replacement (sIFR)
http://www.mikeindustries.com/blog/sifr/
Requires both JavaScript and Flash
Flash is used to display the font
Supported by all major web browsers

typeface.js
http://typeface.neocracy.org/
JavaScript has to be enabled
One or more images are generated in the web browser
Supported by all major web browsers

True Font Family
http://www.truefontfamily.com/
JavaScript has to be enabled
An image is generated on the server
Supported by all major web browsers

@font-face rule
http://www.w3.org/TR/CSS2/fonts.html#font-descriptions
More and more web browsers support it; see below

Web Fonts and Web Browsers

Internet Explorer (since version 4)
Only supported on Windows
Web Embedding Fonts Tool (WEFT)
http://www.microsoft.com/typography/web/embedding/

Netscape Navigator (version 4 and 5)
Netscape had it's own solution (TrueDoc from Bitstream) but discontinued it.

Safari (since version 3.1)
Cascading Style Sheets level 3 (CSS3)
Through the @font-face rule (downloads fonts to the client)

Opera (soon)
Opera will soon reveal it's improved support for web fonts. I don't know the details, but this article might be very related:
http://www.alistapart.com/articles/cssatten

Mozilla Firefox (to be expected in version 3.1)
https://bugzilla.mozilla.org/show_bug.cgi?id=70132

Intellectual Property

There are numerous discussions about IP, here are a few:

Fonts and the Law
http://www.fontembedding.com/fonts-and-the-law/

Other Resources

Web Fonts: User Survey Results
http://blogs.adobe.com/typblography/200 ... sults.html

Silverlight and support for Web Fonts
http://weblogs.mozillazine.org/roc/arch ... _batt.html
Erwin Denissen
High-Logic
Proven Font Technology

Dave Crosby
Typographer
Typographer
Posts: 783
Joined: Mon Feb 23, 2004 1:13 pm
Location: Enoch, Utah

Post by Dave Crosby » Wed Nov 12, 2008 2:28 pm

Very enlightening!

Thank you!!!
Aut nunc aut nunquam

randyhoyt
Posts: 1
Joined: Thu Nov 20, 2008 7:21 pm

Re: Web Fonts

Post by randyhoyt » Thu Nov 20, 2008 7:28 pm

I have a question about using typeface.js with fonts created using High-Logic. I tried to upload one using the converter on the typeface.js site, but it said that the author of the font had chosen to disallow embedding. I have talked with the author who assures me he has done nothing in particular to restrict this. Does anyone know what needs to be done in High-Logic to make the typeface.js site allow it?

Thanks,
~randy

William
Top Typographer
Top Typographer
Posts: 1956
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Web Fonts

Post by William » Fri Nov 21, 2008 8:08 am

I had not previously known of the typeface.js technology.

I looked at various search engines and found many mentions of typeface.js.

I did find the following thread.

http://typophile.com/node/50593

That has a link to the following web page.

http://typeface.neocracy.org/

I have found the following.

http://typeface.neocracy.org/fonts.html

Is that the typeface.js site to which you refer please?

FontCreator does have a facility in a panel named "Font embedding - Licensing rights" where various flags can be altered, FontCreator providing a default setting, so that is perhaps the right place to be looking and trying some experiments. That panel is on a larger panel, which panel can be accessed using Format Settings... General and then it is on the right-hand-side just less than half-way down the panel.

I hope that this helps.

William Overington

21 November 2008

William
Top Typographer
Top Typographer
Posts: 1956
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Web Fonts

Post by William » Fri Nov 21, 2008 9:07 am

I had a try and have found how to solve the problem.

Here is a copy of the transcript.

----

Friday 21 November 2008

8:17 am

Start FontCreator 5.6.

Open CHRONTXT.TTF Chronicle Text Version 0.26 of 10 September 2005.

Save As CHRONEX1.TTF.

Note that the Format Settings... Header page now states the date modified as 21 November 2008.

Try the converter at the http://typeface.neocracy.org/fonts.html web page.

The following message was received, in red.

Error: This font's vendor has indicated that it is not permissible to embed this font.

So, edit CHRONEX1.TTF and switch off the one font embedding flag that is presently switched on.

Try the conversion again.

It works.

----
CHRONEX1.TTF
The CHRONEX1.TTF font with all embedding flags switched off.
(44.78 KiB) Downloaded 235 times
chronicle_text_regular.typeface.js
The file produced by the converter.
(112.02 KiB) Downloaded 228 times
So, I have produced a font for the typeface.js system and I do not know how to use it at the time of writing this note!

Anyway it appears that I have solved the original problem.

If you or any other reader wants to use the chronicle_text_regular.typeface.js then I am happy for that use to take place.

William Overington

21 November 2008

Erwin Denissen
Moderator
Moderator
Posts: 6670
Joined: Fri Oct 04, 2002 12:41 am
Location: De Bilt, The Netherlands
Contact:

Re: Web Fonts

Post by Erwin Denissen » Wed Dec 03, 2008 8:35 am

Today FontLab released a sIFR based product, Photofont WebReady. It allows you to use any font you want on your web pages. It supports colors and transparency.

I haven't tried it myself, but it seems the technique related to TrueType and OpenType fonts is similar to CoffeeCup Website Font. However Photofont WebReady also allows you to embedded a web photofont (a bitmap-based Flash font object).
Erwin Denissen
High-Logic
Proven Font Technology

Bhikkhu Pesala
Top Typographer
Top Typographer
Posts: 6937
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Re: Web Fonts

Post by Bhikkhu Pesala » Sun Dec 07, 2008 11:07 pm

Opera 10 Alpha is available with some support for Web Fonts.

You need to know how to write CSS to add custom fonts to your own web pages.
Added Web font support, allowing the download of fonts specified in font descriptors in @font-face at-rules; TrueType (TTF), OpenType (OTF), and SVG fonts are supported
Attachments
Opera10 Portal.jpg
Opera10 Portal.jpg (213.53 KiB) Viewed 8556 times
My FontsReviews: MainTypeFont CreatorHelpFC11.0 Pro + MT7.0 @ Win10 1703

Bhikkhu Pesala
Top Typographer
Top Typographer
Posts: 6937
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Re: Web Fonts

Post by Bhikkhu Pesala » Fri Jun 07, 2013 11:17 am

WebFont Test Page using WOFF fonts created using FontCreator 7.

Opera 11.64 and 12.15 only work if I disable hinting when creating the fonts (the fonts on the test page are hinted).

Opera Next works OK, as do Firefox and SRWare Chrome Iron.

This is how it is supposted to look:
WOFF Fonts Test Page.png
WOFF Fonts Test Page.png (62.38 KiB) Viewed 5709 times
Last edited by Bhikkhu Pesala on Fri Jun 07, 2013 6:15 pm, edited 2 times in total.
Reason: Updated screen shot
My FontsReviews: MainTypeFont CreatorHelpFC11.0 Pro + MT7.0 @ Win10 1703

Alfred
Top Typographer
Top Typographer
Posts: 897
Joined: Thu Apr 18, 2013 8:08 am

Re: Web Fonts

Post by Alfred » Fri Jun 07, 2013 6:07 pm

Bhikkhu Pesala wrote:This is how it is [supposed] to look:
I see Comic Sans MS for the heading in that screenshot. What happened to Odana? :s
FC11.0 Pro (Help) + MT7.0 (Help) • Windows 10

Bhikkhu Pesala
Top Typographer
Top Typographer
Posts: 6937
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Re: Web Fonts

Post by Bhikkhu Pesala » Fri Jun 07, 2013 6:14 pm

Looks like some caching issues with Opera. I updated the screen shot.
My FontsReviews: MainTypeFont CreatorHelpFC11.0 Pro + MT7.0 @ Win10 1703

Alfred
Top Typographer
Top Typographer
Posts: 897
Joined: Thu Apr 18, 2013 8:08 am

Re: Web Fonts

Post by Alfred » Fri Jun 07, 2013 8:08 pm

That's more like it! :) I seem to remember encountering a similar caching issue in Opera on my system.
FC11.0 Pro (Help) + MT7.0 (Help) • Windows 10

William
Top Typographer
Top Typographer
Posts: 1956
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Web Fonts

Post by William » Wed Jul 09, 2014 7:33 am

Bhikkhu Pesala wrote:WebFont Test Page using WOFF fonts created using FontCreator 7.
I have not made a web font yet.

I am hoping to make a web font version of my Stones font, naming it StonesWebfont and then try to produce a webpage to test it.

I have looked at the source code of the following web page.

http://www.softerviews.org/WebFonts/

My present knowledge of HTML is fairly basic, I have never used a stylesheet at all.

I clearly have a huge learning curve over producing modern web pages.

In order to get me started, as my goal here is to produce and use a web font, could you possibly show me the source code to produce the following please?

The word STONES large and in grey on one line with the words WEB FONT in a smaller size on the next line in blue, both lines using a web font named StonesWebfont.

I think that I am going to need the following somewhere within the code.

@font-face {font-family: "StonesWebfont"; src: url("http://www.users.globalnet.co.uk/~ngo/S ... bfont.woff") format("woff");}

I am hoping to make the font later today.

William Overington

9 July 2014

Alfred
Top Typographer
Top Typographer
Posts: 897
Joined: Thu Apr 18, 2013 8:08 am

Re: Web Fonts

Post by Alfred » Wed Jul 09, 2014 9:25 am

William wrote:My present knowledge of HTML is fairly basic, I have never used a stylesheet at all.

I clearly have a huge learning curve over producing modern web pages.
As you have Serif PagePlus X5 with its 'Web Publishing' mode, you don't need to learn much in order to achieve your goal.
William wrote:I think that I am going to need the following somewhere within the code.

@font-face {font-family: "StonesWebfont"; src: url("http://www.users.globalnet.co.uk/~ngo/S ... bfont.woff") format("woff");}
Your inference is correct. You also need to place it inside a 'style' tag element, like this:

Code: Select all

<style type="text/css">
@font-face {font-family: "StonesWebfont"; src: url("http://www.users.globalnet.co.uk/~ngo/StonesWebfont.woff") format("woff");}
</style>
This discussion probably doesn't really belong on the High-Logic forum, but since we're here: after copying the above code to the Windows clipboard, go to the Insert menu in PPX5, choose 'Web Object > HTML...' and paste the copied code into the Head Code section of the dialog. Unless you've loaded a font named 'StonesWebfont' before running PagePlus, you won't be able to select that font from the relevant dropdown menu and you will therefore need to edit the HTML after publishing.
William wrote:I am hoping to make the font later today.
Good luck!
FC11.0 Pro (Help) + MT7.0 (Help) • Windows 10

William
Top Typographer
Top Typographer
Posts: 1956
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Web Fonts

Post by William » Wed Jul 09, 2014 9:45 am

Thank you.

I have now made the font.

I was thinking that I would need to write the HTML code directly, or maybe have used WebPlus X5 in some way. I did not know that I could use PagePlus X5.

I had not thought at all that I would need to install the woff font on the PC.

William

William
Top Typographer
Top Typographer
Posts: 1956
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Web Fonts

Post by William » Wed Jul 09, 2014 9:53 am

I have been unable to install the font.

I got a dialogue panel saying that the file is either invalid or damaged.

I am running Windows xp, so maybe that is part, or all, of the problem.

William

Post Reply

Who is online

Users browsing this forum: No registered users and 9 guests