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: 11107
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Web Fonts

Post by Erwin Denissen »

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: 793
Joined: Mon Feb 23, 2004 1:13 pm
Location: Enoch, Utah

Post by Dave Crosby »

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 »

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: 2038
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Web Fonts

Post by William »

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: 2038
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Web Fonts

Post by William »

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 950 times
chronicle_text_regular.typeface.js
The file produced by the converter.
(112.02 KiB) Downloaded 965 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: 11107
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: Web Fonts

Post by Erwin Denissen »

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: 9869
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Re: Web Fonts

Post by Bhikkhu Pesala »

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 32755 times
My FontsReviews: MainTypeFont CreatorHelpFC15 + MT12.0 @ Win 10 64-bit build 19045.2486
Bhikkhu Pesala
Top Typographer
Top Typographer
Posts: 9869
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Re: Web Fonts

Post by Bhikkhu Pesala »

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 29908 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 CreatorHelpFC15 + MT12.0 @ Win 10 64-bit build 19045.2486
Alfred
Top Typographer
Top Typographer
Posts: 1030
Joined: Thu Apr 18, 2013 8:08 am

Re: Web Fonts

Post by Alfred »

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
FC14 Pro (Help) + MT11.0 Pro (Help) • Windows 10
Bhikkhu Pesala
Top Typographer
Top Typographer
Posts: 9869
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Re: Web Fonts

Post by Bhikkhu Pesala »

Looks like some caching issues with Opera. I updated the screen shot.
My FontsReviews: MainTypeFont CreatorHelpFC15 + MT12.0 @ Win 10 64-bit build 19045.2486
Alfred
Top Typographer
Top Typographer
Posts: 1030
Joined: Thu Apr 18, 2013 8:08 am

Re: Web Fonts

Post by Alfred »

That's more like it! :) I seem to remember encountering a similar caching issue in Opera on my system.
FC14 Pro (Help) + MT11.0 Pro (Help) • Windows 10
William
Top Typographer
Top Typographer
Posts: 2038
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Web Fonts

Post by William »

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: 1030
Joined: Thu Apr 18, 2013 8:08 am

Re: Web Fonts

Post by Alfred »

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!
FC14 Pro (Help) + MT11.0 Pro (Help) • Windows 10
William
Top Typographer
Top Typographer
Posts: 2038
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Web Fonts

Post by William »

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: 2038
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Web Fonts

Post by William »

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