Web Fonts

Fonts and More Font Related Information
1

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/2007/11/web_user_survey_results.html

Silverlight and support for Web Fonts
http://weblogs.mozillazine.org/roc/archives/2008/08/the_coming_batt.html

2

Very enlightening!

Thank you!!!

3

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

4

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

5

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
chronicle_text_regular.typeface.js
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

6

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).

7

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

8

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

9

I see Comic Sans MS for the heading in that screenshot. What happened to Odana? :s

10

Looks like some caching issues with Opera. I updated the screen shot.

11

That’s more like it! :slight_smile: I seem to remember encountering a similar caching issue in Opera on my system.

12

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/StonesWebfont.woff”) format(“woff”);}

I am hoping to make the font later today.

William Overington

9 July 2014

13

As you have Serif PagePlus X5 with its ‘Web Publishing’ mode, you don’t need to learn much in order to achieve your goal.

Your inference is correct. You also need to place it inside a ‘style’ tag element, like this:

<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.

Good luck!

14

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

15

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

16

I didn’t know you had WebPlus X5. You could do much the same there, but with the added advantage that you would be able to switch to Source View and add a new character style manually, thus obviating the need to have the font installed on your PC.

17

WOFF files should work fine on XP, so I don’t think your OS is likely to have contributed to the problem, but please see my previous post.

18

I am beginning to think that that is because a .woff font is not meant to be used from the Fonts folder.

I am thinking that I made a mistake by making StonesWebfont as the .woff web font version of the .ttf font Stones and that I should have made a .woff font Stones so that I had two font files, one .ttf and one .woff, each having the same font name.

William

19

I concur.

20

You can design one font, and store it as a font project. Then you can export it as .ttf and .woff.