[CSS] font wordt niet goed gerenderd in Firefox

zondag 13 november 2011 12:27

Acties:

0 Henk 'm!

Topicstarter

Ik heb een vreemd probleem. Ik heb een font geembed in een site en daarbij treed een gek probleem op in Firefox 8 (en wellicht ook in eerdere versies): zodra ik twee keer de letter "f" naast elkaar zet worden deze niet getoond. Erg onhandig met woorden als "offerte" natuurlijk

In alle andere browsers gaat het wel goed.

Dit is mijn HTML/CSS:

HTML:

<!DOCTYPE html>
<html lang="nl">
  <head>
    <title>GoT - Firefox Fontbug</title>
    <style>
      @font-face {
        font-family: 'Museo700';
        src: url('museo700-regular-webfont.eot');
        src: url('museo700-regular-webfont.eot?#iefix') format('embedded-opentype'),
          url('museo700-regular-webfont.woff') format('woff'),
          url('museo700-regular-webfont.ttf') format('truetype'),
          url('museo700-regular-webfont.svg#Museo700') format('svg');
        font-weight: normal;
        font-style: normal;
      }

      body{
        font-size: 24px;
        color: #000;
        background: #FFF;
      }

      div{
        margin: 0 0 20px 0;
      }

      .museo{
        font-family: Museo700;
      }
      
      .arial{
        font-family: Arial;
      }
    </style>
  </head>

  <body>

    <div class="museo">Dit is de Museo700: is de 'ff' zichtbaar?</div>
    <div class="arial">Dit is de Arial: is de 'ff' zichtbaar?<div>

  </body>

</html>

Ik heb hier bovenstaande testcase online geplaatst. Heeft iemand enig idee wat dit zou kunnen zijn? Ik ben het nog niet eerder tegengekomen.

omniscale.nl

zondag 13 november 2011 12:30

Acties:

0 Henk 'm!

begintmeta

Moderator General Chat

Iets met de 'ﬀ' ligatuur lijkt niet goed te gaan.

zondag 13 november 2011 12:30

Acties:

0 Henk 'm!

posttoast

Topicstarter

Ik ben niet zo'n fontkenner, wat bedoel je daarmee?

Edit: Wikipedia is vrij duidelijk natuurlijk, maar ik bedoel eigenlijk: wat bedoel je ermee in deze context? Is dit een bekend probleem?

[ Voor 66% gewijzigd door posttoast op 13-11-2011 12:31 ]

omniscale.nl

zondag 13 november 2011 12:34

Acties:

0 Henk 'm!

begintmeta

Moderator General Chat

Ik zou het niet weten, ik weet ook niet of het het is, 't is maar iets dat ik opwerp... Er zijn meen ik eerder al wel wat probleempjes met ligaturen geweest.

In de browsers die ik heb geprobeerd zijn het overigens allemaal geen ligaturen... dus hoe waarschijnlijk mijn opgooi is...

Ik kan je niet verderhelpen, sorry voor de wellicht overbodige posts

zondag 13 november 2011 12:39

Acties:

0 Henk 'm!

Moning2

Wat gebeurt er als je er 'niks' tussen plaatst?

Bijvoorbeeld de 2e f tussen <strong></strong> zetten of iets wat geen effect heeft op de layout

zondag 13 november 2011 12:44

Acties:

0 Henk 'm!

begintmeta

Moderator General Chat

Is https://bugzilla.mozilla.org/show_bug.cgi?id=697320 toch gerelateerd?

zondag 13 november 2011 12:48

Acties:

0 Henk 'm!

Giant87

Ik kwam dit tegen op Google. Je webfont character set kent geen Ligature die Firefox graag wil:

http://stackoverflow.com/...opping-letters-in-firefox

Direct (Solvable) Cause

When a standard True Type font (TTF) gets processed into the multiple versions that are useful for a web font (EOT, SVG, WOFF), the processing tool or vendor can decide whether or not to include the font's full character set. Some will default to a reduced character set to reduce file sizes.

In my case, one or more of the generated web font files excluded ligatures, presumably considering them to be non-essential typographic tweaks. To fix the problem I used a custom web font builder at MyFonts to generate font files with the full character set.

(For MyFonts specifically this was at Order History > select relevant font > Webfont Kit Builder tab > Advanced, then check both "Complete Character Set" and "Keep OpenType Layout".)

Underlying Cause

My belief, which is only an educated guess:

I think Firefox is going out of its way to do nice typography, more so than other browsers. So when it sees something that it could render as a ligature ("fi", "fl", "ff", etc.) it tries to render the letters as a single ligature glyph rather than as two distinct characters. If your web font doesn't include the ligature glyphs, your letters will disappear. (If my guess is right, I'm surprised I haven't read about this problem before.)

//edit dit voorbeeld (nancial i.p.v. financial) geeft ook de fout weer in Safari 5.1, dus niet enkel Firefox.
http://people.mozilla.org/~jdaggett/tests/bug697320.html

[ Voor 5% gewijzigd door Giant87 op 13-11-2011 12:51 ]

zondag 13 november 2011 13:02

Acties:

0 Henk 'm!

T-MOB

posttoast schreef op zondag 13 november 2011 @ 12:30:
Ik ben niet zo'n fontkenner, wat bedoel je daarmee?

Edit: Wikipedia is vrij duidelijk natuurlijk, maar ik bedoel eigenlijk: wat bedoel je ermee in deze context? Is dit een bekend probleem?

Ik heb wel eens iets soortgelijks gehad met een font. Dan werd "No" gerendered als №. Ik heb dat toen opgelost door in font-forge letter voor letter wat zaken uit het font te slopen. Daarna deed Firefox het wel goed. Mocht je van plan zijn om datzelfde te gaan doen dan wil ik er nog wel even induiken wat ik precies heb gedaan. Ik moet wel ergens het foute en het correct hebben zodat ik ze kan vergelijken...

edit: Ik heb even gekeken hoe het ook al weer zat. Hieronder een screenshotje van FontForge fonteigenschappen van hetzelfede font, waarbij de ene problemen geeft in Firefox en de andere niet.

Het font dat problemen geeft (de achterste) heeft een substitutietabel waarin aonder andere "No" vervangen wordt door №. Het verwijderen van de tabel zorgde ervoor dat firefox de letters een voor een renderde

[ Voor 24% gewijzigd door T-MOB op 13-11-2011 13:33 ]

Regeren is vooruitschuiven

zondag 13 november 2011 14:04

Acties:

0 Henk 'm!

posttoast

Topicstarter

Moning2 schreef op zondag 13 november 2011 @ 12:39:
Wat gebeurt er als je er 'niks' tussen plaatst?

Bijvoorbeeld de 2e f tussen <strong></strong> zetten of iets wat geen effect heeft op de layout

Geprobeerd, dat werkt inderdaad!

begintmeta schreef op zondag 13 november 2011 @ 12:44:
Is https://bugzilla.mozilla.org/show_bug.cgi?id=697320 toch gerelateerd?

Dat is volgens mij exact hetzelfde probleem. Even testen leert mij dat met 'fi' hetzelfde gebeurt!

@Giant87: Yep, wederom hetzelfde probleem.

@T-MOB: Dank voor het uitzoeken. Ik ga even kijken of ik het daarmee ook kan fixen

omniscale.nl

zondag 13 november 2011 15:40

Acties:

0 Henk 'm!

begintmeta

Moderator General Chat

Het lijkt er dan inderdaad toch wel op dat de ligaturen van het lettertype problematisch zijn, zoals ik aanvankelijk vermoedde. Workarounds lijken er te zijn, maar anders eens kijken naar het fixen van het lettertype, op de site van Jos Buivenga staat dat ligaturen aanwezig zouden moeten zijn.

[ Voor 84% gewijzigd door begintmeta op 13-11-2011 16:02 ]

zondag 13 november 2011 20:36

Acties:

0 Henk 'm!

posttoast

Topicstarter

Ik zal wel eens even kijken of ik contact op kan nemen met MyFonts. Daar heb ik het font gekocht (inclusief de webvarianten).

omniscale.nl

maandag 14 november 2011 09:56

Acties:

0 Henk 'm!

Flowmo

posttoast schreef op zondag 13 november 2011 @ 20:36:
Ik zal wel eens even kijken of ik contact op kan nemen met MyFonts. Daar heb ik het font gekocht (inclusief de webvarianten).

Heeft de gewone versie in Word wel ligaturen? Dan zou je de TTF via FontSquirrel zelf eens naar webfonts om kunnen zetten. Dat zou de problemen mogelijk kunnen verhelpen.

maandag 14 november 2011 21:31

Acties:

0 Henk 'm!

R4gnax

Mozilla Firefox
Mozilla

Flowmo schreef op maandag 14 november 2011 @ 09:56:
[...]

Heeft de gewone versie in Word wel ligaturen? Dan zou je de TTF via FontSquirrel zelf eens naar webfonts om kunnen zetten. Dat zou de problemen mogelijk kunnen verhelpen.

Als ik me goed herinner staan fonts uit de MyFonts foundry op FontSquirrel's blacklist. Die kun je niet meer laten verwerken. (Als je dacht dat DRM op audio/video al erg was, moet je weten dat op de event horizon van iets nog veel ergers staan. Met de IP rechten rondom font families is het namelijk nog vele, vele malen erger gesteld.)

maandag 14 november 2011 21:33

Acties:

0 Henk 'm!

posttoast

Topicstarter

R4gnax schreef op maandag 14 november 2011 @ 21:31:
[...]

Als ik me goed herinner staan fonts uit de MyFonts foundry op FontSquirrel's blacklist. Die kun je niet meer laten verwerken. (Als je dacht dat DRM op audio/video al erg was, moet je weten dat op de event horizon van iets nog veel ergers staan. Met de IP rechten rondom font families is het namelijk nog vele, vele malen erger gesteld.)

Gek genoeg kan ik deze TTF's wel gewoon door FontSquirrel halen. Echter: de fonts die daaruit komen worden veel lelijker gerenderd dan alle bestanden die MyFonts aanlevert. Alsof ze veel minder vloeiend zijn.

omniscale.nl

dinsdag 15 november 2011 13:07

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

Dat is wrs weer omdat hinting en/of kerning weggeflikkerd wordt. Dat kun je instellen in de font-face generator.

ohja, R4gnax, MyFonts is eigenlijk geen foundry, maar gewoon een webshop. Neemt niet het DRM-gezever weg natuurlijk

[ Voor 35% gewijzigd door _Thanatos_ op 15-11-2011 13:08 ]

日本！🎌

dinsdag 15 november 2011 19:50

Acties:

0 Henk 'm!

posttoast

Topicstarter

Probleem opgelost

De oplossing bleek in de URL van Giant87 te staan (deze dus). Bij MyFonts zit er een (ernstig goed verborgen) optie om een Complete Character Set te downloaden. Als je dat doet gaat het helemaal prima.

Voor mensen die in de toekomst dit probleem ook hebben: je moet in het Selected Webfonts overzicht ieder fontje uitklappen en dan "Complete Character Set" aanvinken. Zo dus:
MyFonts probleem

Bedankt voor jullie hulp allemaal

omniscale.nl

Onderwerpen