/    Sign up×
Community /Pin to ProfileBookmark

font-variant:small-caps not working with OpenType typefaces

Copy linkTweet thisAlerts:
Jul 29.2011

Hi everyone,

I’m having a problem implementing OpenType features in web fonts. No matter what typeface or browser I use—and I’ve tried several of each—I can’t get the CSS font-face property to listen to font-variant:small-caps. In every case, the browser synthesizes its own small caps by scaling the full caps, which of course looks terrible.

The typefaces I’ve tried with this are all open-source advanced fonts: Cabin, Cardo, Lato, and Sorts Mill Goudy, all of which support small caps at least in their roman, regular-weight face. I’ve used Firefox 5, Opera 11.5, and the latest build of Iron (Chrome without Big Brother), all to no avail.

It’s worth mentioning that other properties of advanced web typography, such as automatic ligatures (as well as the font-face property itself), are all working.

You can see my test page at [url]http://www.utcolmus.org/test.html[/url] , and the CSS file at [url]http://www.utcolmus.org/main.css[/url]. Any help would be greatly appreciated!

Thanks,
Bram

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@TheRealmsOfGoldauthorJul 29.2011 — Update: apparently, the CSS3 specification that allows fonts to access their advanced glyphs apparently isn't fully implemented yet, even in Firefox, which is setting the standard for compliance. But Firefox has a hack built in, which is supposed to allow you to preview the ability of the browser to access these glyphs: http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support

I tried the Mozilla-only workaround, thinking it would be nice if it worked in at least one browser. But the workaround never loaded any small caps at all. I've updated the test page to reflect that problem—look at the entries 2.1, 4.1, and 6.1: http://www.utcolmus.org/test.html
Copy linkTweet thisAlerts:
@Cory_RJul 29.2011 — It's working correctly for me in FF5. You do realize that small-caps converts all lowercase letters to uppercase, making the uppercase letters slightly larger than the original lowercase letters that are converted to uppercase?

What I see: http://prntscr.com/2gj7f
Copy linkTweet thisAlerts:
@TheRealmsOfGoldauthorJul 29.2011 — Hi Cory R.,

What you're looking at are not true small caps, but rather the browser's rendering of the capital letters at smaller sizes. Scaling them down makes their lines thinner, so the full-height capital letters now appear, by comparison, too heavily weighted. This is a classic problem of web typography.

Update: according to someone who opened up one of my font files, the small caps have been stripped out by the encoding process. I'll see if I can fix it.
Copy linkTweet thisAlerts:
@TheRealmsOfGoldauthorJul 29.2011 — Looks like the culprit is FontSquirrel's subsetting option. Setting it to "no subsetting" fixed the problem.
×

Success!

Help @TheRealmsOfGold spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...