Unstable font special styling

I implemented a custom font in an html file using css but the font doesn't load the same way in different browsers. The specific problem I'm having is with a behavior of the font were the last letter of a word gets a special effect. Here I show you an Opera/Firefox comparison:

Can I the special effect work in both browsers?

EDIT:

I basically followed this tut, since I didn't know how to use custom fonts:https://www.youtube.com/watch?v=AYNL_VY5m0Y

CSS:

@font-face{
    font-family: 'custom';
    src: url('Hipster Script Pro.otf');
}


.classname {

    font-family: 'custom';
    font-size: 30px;
    LINE-HEIGHT:20px;
    margin-top: 25px;
    margin-bottom: 15px;
    color: #303030;
    text-align: center;
}

Answers


Without seeing code or the font data, it is hard to say for sure, but assuming the exact same font data but different browsers: most likely what you are seeing is the result of OpenType features. Different browsers have different effects on/off by default. My guess is that this font has a 'contextual alternates' feature which transforms the word-final 's' into a different form (long tail, in the top example).

If it is indeed OpenType features at play, you may be able to control the behavior with CSS font-feature-settings.

UPDATE After reviewing the font data, indeed this is the issue: the font defines a Contextual Alternates ('calt') feature in its OpenType Layout tables. This feature is on by default in some browsers and operating systems, resulting in the long-tail 's' display. In other cases it is off, resulting in the short 's'.

You can manipulate this feature on/off via CSS as described here, though support is not quite universal just yet.

As an somewhat related point: I would recommend removing the link to the font file; it is a commercial/non-FLOSS typeface, and you are probably not free to redistribute it in that manner. You might also want to double-check that your license to the font allows you to use it as a webfont (@font-face).


Need Your Help

Get a Framework element from a Storyboard

wpf xaml mvvm storyboard frameworkelement

I have a reference to an instance of a Storyboard object, and want to get hold of the Framework element that it is attached to / animating. I haven't been able to come up with any way of doing this...