@font-face

Hi there,

My first post on the Typophile forum. My issue: Some glyphs of my first ever font Agràve aren't showing properly in Chrome and Safari. In FireFox and Internet Explorer the … : and ; do show how they supposed to look. For example the triple dots are reduced to just 1 dot.

I use @font-face in the CSS code and the original OTF (from Glyph App on the Mac). So I assume there is nothing wrong with font file, and nothing went wrong in convertng becauce nothing was converted :-)

What can be causing this strange problem? Anyone?

Daan

Does anyone know of a good alternative typeface to replace United on the web? I can't find anything that will work.

Thanks!

Hi, I've been searching everywhere for the last week to find a definitive answer to the question: Is it actually possible to do style linking with your @font-face declarations and have it use the proper font faces in IE7-8 (when just using 4 basic variations - normal/bold/italic/bold-italic)?

In our tests, with a single self-hosted font and just 4 variations (normal, bold, italic, bold-italic), all browsers understand the @font-face style linking properly and apply the right face for bold/italic/bold-italic type. But our good friend IE recognizes the normal face properly, then just applies a 'faux' bold & italic to all instances of bold/italic/bold-italic type! It looks terrible.

Hi there,
I wondered what website fonts might look good for an internet site. I tried Fakt (Opentype) on one website and I feel it looks better than Arial. ( in case you want to have a look: http://info-buddhismus.de )

For 2 other websites I was thinking maybe I use another opentype font which can be included directly via the @font-face CSS rule. But I checked with Museo Sans or Calluna Sans and it does not look good at all.

Any idea which Font might work well? Verdana and Arial/Helvetica seem to be still the better choice. Also any example or link to a site which uses a well working font (being easy to read and also looking good) would be welcomed.

Hi Typophile,

After trying out TypeKit last year and deciding that it was a bit too bleeding-edge to be of use to me at that time, I've jumped back in with another investigation of the now numerous webfont vendors and services available online. I've checked out FontDeck, Typotheque, and WebType. So far I've been avoiding TypeKit because I prefer a not-javascript-dependant solution.

A major frustration for me is the seeming lack of information regarding which typefaces in a given library are technically suited to rendering small type across all browser platforms. I've basically been surfing these websites in IE6 with cleartype disabled (painful!) to get an idea of the worst-case-scenario for each typeface.

Hey,
Does anyone know what font is featured in the recent Diesel 'Be Stupid' campaign?
Seen here: http://www.creativereview.co.uk/images/uploads/2010/01/diesel5_0.jpg
Thanks!

Contest to Recognize Websites that Best Integrate Web Fonts is Now Accepting Entries through Nov. 7, 2010

WOBURN, Mass., Sept. 27, 2010 – Monotype Imaging Holdings Inc. (Nasdaq: TYPE), a leading global provider of text imaging solutions, is accepting entries through Nov. 7, 2010 for the first Web Font Awards, an international competition designed to recognize websites that incorporate exceptional use of Web fonts. Prizes include two $3,000 cash awards, Apple® iPad® mobile digital devices and various typeface offerings from Monotype Imaging. Winning entries will be determined at a live judging event on Nov. 16, 2010, during the Future of Web Design conference, Nov. 15-17, in New York City.

Hi there,

I would like to ask the experts around here what level of TTF hinting a font should need to have in order to be a good performer as webfon (and please do not tell me 'as much as possible' :) ).

Specifically I would like to know what tasks should be done after converting PS hints to instructions or on top of auto TTF hinting.
(or maybe well done auto TTF in Fontlab or AFDK is enough?).

Thanks in advance.

Hello,

I'm puzzling over what the problem is, with using @font-face. I was wondering if someone can tell me if this is an issue in setting up the embedding, a problem with the creation of the font itself, a browser issue, or something else entirely.

Here's the problem.

Occasionally, when embedding a font using @font-face, the tails or extenders somehow get rendered clipped. Also, sometimes the baseline or topline (did I make that up word?) get rendered all wobbly and wonky.

Now, due to licensing issues, font embedding legalities and such, I'm pretty limited to what typefaces I can use. I recognize it's possible it's just a poorly constructed font. Any help would be appreciated. See my image attached, for an example.

Web Fonts At The Crossing

An article - part news roundup, part analysis, part tutorial - that readers at Typophile might find interesting and useful.
Comments welcome. Either here or at AListApart.

Does anyone know why iPhone/iPad/iTouch only supports SVG @font-face implementation, and not TTF or WOFF? Seems strange to me since Apple® Safari® (Webkit) supports TTF from version 3.1 and later. Thanks!

While we are waiting for WOFF support broadly, there are some protective measures available for webfonts to prevent them from being installed locally.

There is a technique of obfuscating the name table, rendering it unusable as a system font, but fully functional as a webfont. Ethan Dunham of Font Squirrel and Fontspring has led much of the research below, based on some prior work from Peter Bilak of Typotheque and Philip Taylor with his Font Optimizer [0]

Specifically, these are the modifications for a TrueType font:


I made this just as a general info for those uniformed.

It is simplified, but generally speaking these are main possible paths with default settings.

X axis is market share (with some guessing).

I know a small examples of renderings could be included for better understanding, and I will post this & other refinements later.

A few things not mentioned:
Linux with FreeType rendering, but I have no idea how many people use subpixel rendering or other settings. Each setting has probably less than 1% of users.
Quartz rendering does also other types than subpixel AA, but I would say they are in minority (I really don't know).
There is also an old version of Safari, with Quartz rendering on Windows with default setting.

Extensis recently announced that we are getting into web font delivery. Indeed, you can see Extensis web font tech in use on that page and throughout the Extensis web site.

In related news, we're also hosting a pre-conference cocktail party on Sunday, May 23rd at An Event Apart in Boston. You don't have to be attending the conference to come, though. Typophiles welcome!

Yes, we'll be showing our web font goodness at the party. :)

I am running OS X Snow Leopard and now again I a pronlem with certain fonts rendering properly. The characters are displaying as a glyph not found symbol.

The attached file is an example that occured when testing @font-face implementation in Chrome, weirdly Safari was fine. I have also had the same issue in OpenOffice, TextEdit, PowerPoint and at other random time.

Anyone got any ideas?

Elk Grove Village, IL – April 14, 2010 – Ascender Corporation, a leading provider of advanced font products, announced a new web fonts service on its www.AscenderFonts.com site to appeal to web designers and web developers.

Web Fonts from Ascender is a new service to format websites with CSS @font-face using licensed downloadable fonts. Web Fonts eliminate the hassles and expense of using Flash, JavaScript or image replacement techniques for headlines. Web Fonts from Ascender also offers high quality text fonts for web designers to extend their typographic choice beyond the limited set of ‘web-safe’ fonts.

I've seen CSS tricks being used to create offset layered headlines, usually for a drop shadow. Has anyone seen an example of embedded web fonts being used with multi-layered fonts to create a multicolored effect?

There are two major drawbacks with @font-face at the current state, IMO: The subscription model (exception for Typotheque) and the unreliable browser rendering. Both makes me uneasy about using web fonts for anything but playing around.

Have any of you actually relied on @font-face in real life projects?

Hi Typophiles,

So, fonts on the web.

As many from this community have seen, when fonts are used in @font-face, they can come out looking quite different on the various browsers and operating systems. As part of the Type Rendering project (along with Tim of Nice Web Type, Ethan of Fonthead, and Zoltan), I want to figure this issue out. I want custom type on the web to succeed.

At this point we’re ready to pin down and illustrate the aspects that contribute to poor rendering quality. But I need this community’s help in one key part: We need to select appropriate typefaces to use as baselines.

We think we need three typefaces:
1) A CFF OTF font, designed for the web, with hinting.

Syndicate content Syndicate content