3 replies [Last post]
carelour
carelour's picture
Offline
newbie
Last seen: 7 years 40 weeks ago
Timezone: GMT-4
Joined: 2014-09-18
Posts: 2
Points: 3

I'm trying to get the ligatures for a webfont I created to show up in Chrome and Firefox and IE; they currently only appear in Safari and iOS.

I'm trying to get the ligatures to appear on a larger site, but for the sake of testing, I create a simple HTML page here: http://partyglamourshop.com/joomla/ligatures.html

1. I created the webfont using fontsquirrel and made sure to include the unicode characters that have the ligatures that I want to appear on the page. I double and triple checked that they are in the woff, eot and svg files.

I cannot for the life of me figure out WHY the ligatures won't appear!

Now HERE'S the fun part. I have the font installed on my computer (OSX Mavericks). If I remove the webfont declaration in my css and adjust the class to call the font as it appears on my computer, the ligatures appear. HELP!

Here's my CSS:

Here's my css stylesheet:

@font-face {
font-family: FoglihtenNo07caltRegular;
src: url('fonts/foglihtenno07calt.eot');
src: url('fonts/foglihtenno07calt.eot') format('embedded-opentype'),
url('fonts/foglihtenno07calt.woff') format('woff'),
url('fonts/foglihtenno07calt.ttf') format('truetype'),
url('fonts/foglihtenno07calt.svg#FoglihtenNo07caltRegular') format('svg');
}

.ligature {
font-family: FoglihtenNo07caltRegular;
font-size: 22px;
text-transform: uppercase;

/* Display Ligatures */
text-rendering: optimizeLegibility;
font-variant-ligatures: common-ligatures;
-moz-font-feature-settings:"liga=1, dlig=1";
-moz-font-feature-settings:"liga", "dlig";
-ms-font-feature-settings:"liga", "dlig";
-o-font-feature-settings:"liga", "dlig";
-webkit-font-feature-settings:"liga", "dlig";
font-feature-settings:"liga", "dlig";

}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Ligatures?

Which characters? I see an example of kerning, RT, but I don't see which should be ligatures. Can you clarify?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

carelour
carelour's picture
Offline
newbie
Last seen: 7 years 40 weeks ago
Timezone: GMT-4
Joined: 2014-09-18
Posts: 2
Points: 3

I've added an image to the

I've added an image to the page of what it should look like; the first letter of each word should have the ligature.

http://partyglamourshop.com/joomla/ligatures.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Thanks, that helps

Fonts are not my area of expertise, and especially not the css3 font-feature-settings. I noticed only three possible issues, and they may not actually affect anything here.

  1. Without a doctype, the browsers render in quirks mode. But maybe you have one on the actual pages. Further, that the font source makes a difference, implies the rendering mode is not the problem.
  2. You do have at least one css error. See the W3C validator.
  3. Note the warning on -prefix-font-feature-settings. This is not a recognized vendor prefix, i.e. -moz, -ms, -o, -webkit. Is the hyphen a typo?

Is there a domain conflict? See MDN @font-face.

Quote:

Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.

You have now exhausted my knowledge on the subject.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.