Webfont wordt niet ingeladen in Wordpress

[Zeror]

Ik ben bezig met een Wordpress website. Hier probeer ik een aantal fonts (10 fontfiles) in te laden.
Via fontsquirrel heb ik mijn webfonts laten genereren en alle fonts werken naar behoren, behalve eentje. Dit font komt uit hetzelfde font-pakket als de andere varianten die ik van dit font gebruik.

Het font waar het om gaat is PT Sans. PT Sans regular.
De italic en de bold versies worden wel gewoon ingeladen. Alleen de regular pakt ie niet. Alle url's naar de fontbestanden kloppen gewoon in de css files.

Gebruikte code:

Cascading Stylesheet:

@font-face {
    font-family: 'pt_sans';
    src: url('fontfiles/pts55f-webfont.eot');
    src: url('fontfiles/pts55f-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontfiles/pts55f-webfont.woff2') format('woff2'),
         url('fontfiles/pts55f-webfont.woff') format('woff'),
         url('fontfiles/pts55f-webfont.ttf') format('truetype'),
         url('fontfiles/pts55f-webfont.svg#pt_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ik heb geprobeerd via expert modus op Fontsquirrel het font nog eens te genereren, maar dat haalt niks uit.

Heeft iemand een idee wat het probleem zou kunnen zijn?

[b2vjfvj75gjx7]

Even op F12 klikken en zien of er foutmeldingen zijn...

Het kan van alles zijn, een 404 / cross-domain access violence / een flag in het font dat embedding niet toestaat / etc...

Sowieso is het originele CSS'je van FS in kapitalen wat een 404 kan triggeren;

Cascading Stylesheet:

@font-face {
    font-family: 'pt_sansregular';
    src: url('PTS55F-webfont.eot');
    src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS55F-webfont.woff') format('woff'),
         url('PTS55F-webfont.ttf') format('truetype'),
         url('PTS55F-webfont.svg#pt_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

[ Voor 4% gewijzigd door b2vjfvj75gjx7 op 14-04-2015 18:28 ]

[Zeror]

b2vjfvj75gjx7 schreef op dinsdag 14 april 2015 @ 18:28:
Sowieso is het originele CSS'je van FS in kapitalen wat een 404 kan triggeren;

Het font heeft standaard kapitalen ja, maar de gegenereerde webfontfiles hebben allemaal kleine letters.

Ik ga eens ff op F12 drukken op mn werk morgen en kijken of ik iets kan vinden.

[ Voor 12% gewijzigd door Zeror op 14-04-2015 22:42 ]

[Zeror]

Ik heb gekeken met de developer tools van Firefox of ik iets kon vinden, maar ik zie tot nu toe niks. Ook geen foutmeldingen ofzo.

Het vreemde is, is dat van PT Sans meerdere fontfiles gebruik. Dus de regular (werkt dus niet), de italic en de bold versie. Die laatste twee worden wel gewoon ingeladen. Dus als ik twee font-face's instel voor PT Sans, dan pakt ie de regular (eerste) niet, maar de tweede (andere variant van het font uit hetzelfde font-pakket) wel.

Cascading Stylesheet:

@font-face {
    font-family: 'pt_sans';
    src: url('fontfiles/pts55f-webfont.eot');
    src: url('fontfiles/pts55f-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontfiles/pts55f-webfont.woff2') format('woff2'),
         url('fontfiles/pts55f-webfont.woff') format('woff'),
         url('fontfiles/pts55f-webfont.ttf') format('truetype'),
         url('fontfiles/pts55f-webfont.svg#pt_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pt_sans';
    src: url('fontfiles/pts56f-webfont.eot');
    src: url('fontfiles/pts56f-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontfiles/pts56f-webfont.woff2') format('woff2'),
         url('fontfiles/pts56f-webfont.woff') format('woff'),
         url('fontfiles/pts56f-webfont.ttf') format('truetype'),
         url('fontfiles/pts56f-webfont.svg#pt_sansitalic') format('svg');
    font-style: italic;
}

[Hiroj]

Zeror schreef op woensdag 15 april 2015 @ 16:01:

Cascading Stylesheet:

@font-face {
    font-family: 'pt_sans';
    src: url('fontfiles/pts55f-webfont.eot');
...
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pt_sans';
    src: url('fontfiles/pts56f-webfont.eot');
...
    font-style: italic;
}

Dat komt waarschijnlijk omdat je nu twee keer dezelfde font-family hebt gedefinieerd.
Heb je het probleem nog steeds als je het met twee verschillende namen bij font-family uitprobeert?

[ Voor 49% gewijzigd door Hiroj op 16-04-2015 08:10 ]

[Zeror]

Hiroj schreef op donderdag 16 april 2015 @ 08:09:
[...]

Dat komt waarschijnlijk omdat je nu twee keer dezelfde font-family hebt gedefinieerd.
Heb je het probleem nog steeds als je het met twee verschillende namen bij font-family uitprobeert?

Ja, dat is het probleem niet. Je kan meerdere varianten onder 1 font-family laten vallen.
Maar ik geprobeerd verschillende namen te gebruiken, maar dat loste het niet op.

[b2vjfvj75gjx7]

Dat bedoelt Hiroj niet;

De entiteit van je font is 2x achter elkaar hetzelfde, nl 'pt_sans'.

De eerste is 'regular' de tweede is 'italic'.

Als je dus een font bij zijn entiteit aanroept, 'pt_sans' dan wordt de tweede getoond - omdat CSS lineair van boven naar beneden wordt gerenderd / gelezen door de parser.

De eerste declaratie zal dus altijd genegeerd wordt in dit geval, omdat de CSS-parser nu denkt dat de tweede een correctie van de eerste is.

Dus even de entiteit aanpassen en natuurlijk de aanroep daar naar toe...

Geen idee of dat in deze specifieke case het geval is, maar als je onderstaande CSS maakt, wordt een 'div' gewoon rood en niet zwart...

Cascading Stylesheet:

div.foo{background:#000;}

div.foo{background:#f00;}

Entiteiten zijn hetzelfde, declaratie is anders - dus wordt de tweede uitgevoerd ten koste van de eerste.

@font-face is in principe modulair van syntax dus iets 'complexer' (je kan eventueel namespaces nesten in één declaratie) maar dat is in jou voorbeeld niet het geval.

[ Voor 31% gewijzigd door b2vjfvj75gjx7 op 16-04-2015 11:00 ]

[Zeror]

b2vjfvj75gjx7 schreef op donderdag 16 april 2015 @ 10:44:
Dat bedoelt Hiroj niet;

De entiteit van je font is 2x achter elkaar hetzelfde, nl 'pt_sans'.

De eerste is 'regular' de tweede is 'italic'.

Volgens mij werkt dat met @font-face anders. Hier definieer je de tekstopmaak met verschillende fonts en kan de font-family meerdere keren terugkeren.

Dus in mijn geval, zou dus moeten gebeuren wanneer ik aangeef dat ik een tekst opmaak met het font pt_sans en geef aan dat de font style italic moet zijn, dat ie kijk welke definitie daarbij matched en dus het font wat daarbij dus pakt. Geef ik aan de font style normal moet zijn, kijkt ie naar de definitie welke bij normal hoort en pakt ie die. Hiermee voorkom je dat er valse tekstopmaak gemaakt wordt.
Als jij namelijk een stuk tekst typt in pt_sans en bepaalde woorden heb je als italic of dikgedrukt aangeduid dan, weet css dat ie de italic/dikgedrukte versie moet pakken, want die heb je met @font-face gedefinieerd.

[Spinal]

Zeror schreef op donderdag 16 april 2015 @ 12:03:
Volgens mij werkt dat met @font-face anders. Hier definieer je de tekstopmaak met verschillende fonts en kan de font-family meerdere keren terugkeren.

Klopt. Dit is wat Google Webfonts er van maakt (iets versimpeld):

Cascading Stylesheet:

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/ATKpv8nLYAKUYexo8iqqrg.woff2) format('woff2');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://fonts.gstatic.com/s/ptsans/v8/0XxGQsSc1g4rdRdjJKZrNPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}

Zelfde font-family, verschillende font-weight, zoals het hoort.

[b2vjfvj75gjx7]

...en als je een test-case doet met enkel de regular?

Dan weet je of regular en italic elkaar niet in de weg zitten - en dus ook in welke hoek je het moet zoeken.

[Zeror]

b2vjfvj75gjx7 schreef op donderdag 16 april 2015 @ 13:42:
...en als je een test-case doet met enkel de regular?

Dan weet je of regular en italic elkaar niet in de weg zitten - en dus ook in welke hoek je het moet zoeken.

Dan werkt het nog niet. Ik heb alle font-verwijzingen uit-gecomment, behalve de regular. Daarmee zie ik enkel de browser defaulf font. Regular font wordt niet gezien.

Heb zelf ook nog zitten zoeken. Het demo-htmlsite die met het genereren mee komt, daar werkt het font overigens wel. Verplaats ik dat bestand naar de fontmap, werkt het weer niet.. Het font via Google Fonts inladen werkt dan weer wel.

Ikke niet meer snap nu.

[ Voor 6% gewijzigd door Zeror op 16-04-2015 14:41 ]

[b2vjfvj75gjx7]

Het is verboden te linken geloof ik... Maar een link naar een kale setup is wel handig nu 😊

Klinkt overigens als een server issue... Wellicht xhr of crossdomein request?

F12 helpt ook niet?

[ Voor 34% gewijzigd door b2vjfvj75gjx7 op 16-04-2015 15:38 ]

[Zeror]

Site draait nu nog op m'n localhost op mn werkpc. Kan pas dinsdag weer hier naar kijken.

[ Voor 41% gewijzigd door Zeror op 16-04-2015 18:08 ]

[b2vjfvj75gjx7]

En de test-case werkt daar wel op?

Fonts hebben altijd een binaire flag embedded die aangeeft in welke mate ze gedistribueerd mogen worden. Met een hex-editor (of speciale font-editor) kan je die flag aanpassen, maar dat is illegaal.

Een font-creator kan bv. zeggen dat het font wel voor DTP gebruikt mag worden (actief), websites (passief), maar niet in apps (passief). Via een key kan je dat instellen 'in' de code van het font.

Maar het lijkt me niet dat dit hier het geval is; FontCreator verspreid alleen fonts die usable zijn (al dan niet tegen betaling) en jou font valt daar sowieso onder.

Via de developers-console (meestal F12) kan je de debug-log zien en vaak zie je (ook met fonts) wat er dan mis is...

Desnoods klik je met rechts op een tekst die het font zou moeten weergeven en kijk je naar de CSS properties. Wellicht staat er ergens een 'font-family : ... !important' en die overruled dan alle regular expressies...

[Zeror]

b2vjfvj75gjx7 schreef op vrijdag 17 april 2015 @ 10:32:
En de test-case werkt daar wel op?

de demo html-file van het font werkt inderdaad op localhost.

Fonts hebben altijd een binaire flag embedded die aangeeft in welke mate ze gedistribueerd mogen worden. Met een hex-editor (of speciale font-editor) kan je die flag aanpassen, maar dat is illegaal.

Een font-creator kan bv. zeggen dat het font wel voor DTP gebruikt mag worden (actief), websites (passief), maar niet in apps (passief). Via een key kan je dat instellen 'in' de code van het font.

Maar het lijkt me niet dat dit hier het geval is; FontCreator verspreid alleen fonts die usable zijn (al dan niet tegen betaling) en jou font valt daar sowieso onder.

Nee, dat is hier niet het geval. Dan zouden de andere varianten van het font ook niet moeten werken.

Via de developers-console (meestal F12) kan je de debug-log zien en vaak zie je (ook met fonts) wat er dan mis is...

Desnoods klik je met rechts op een tekst die het font zou moeten weergeven en kijk je naar de CSS properties. Wellicht staat er ergens een 'font-family : ... !important' en die overruled dan alle regular expressies...

Ik heb via de developers console gekeken. De css geeft gewoon aan dat ie pt_sans moet hebben. Via de console zie ik geen foutmeldingen mbt dit probleem. Ik heb gekeken in Firefox en Chrome. Maar misschien heb ik het wel niet goed gezien.

[BramVroy]

Lost het probleem an sich niet op, maar in de tussentijd kan je misschien gewoon de Google Fonts gebruiken: https://www.google.com/fonts#UsePlace:use/Collection:PT+Sans

[Zeror]

BramVroy schreef op donderdag 23 april 2015 @ 15:15:
Lost het probleem an sich niet op, maar in de tussentijd kan je misschien gewoon de Google Fonts gebruiken: https://www.google.com/fonts#UsePlace:use/Collection:PT+Sans

Ja, dat heb ik nu ook gedaan. Heb het even laten rusten nu. Kijk er later wel weer na. Wellicht dat de verhuizing van localhost naar webhost het probleem oplost.

[Sebazzz]

Nog even een poging waard wellicht: Wellicht stuurt de server de bestanden met het verkeerde MIME type. Controleer of voor elke extensie het juiste MIME type verstuurd wordt, en corrigeer indien nodig.

Bij IIS kan je bijvoorbeeld zoiets gebruiken:

XML:

<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".htc" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
      <mimeMap fileExtension=".htc" mimeType="text/x-component" />
    </staticContent>
  </system.webServer>
</configuration>

Let op dat bij jouw serverconfiguratie je andere bestanden zoals *.ttf misschien ook expliciet moet opgeven.

[ Voor 6% gewijzigd door Sebazzz op 23-04-2015 18:58 ]