Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

Webfont wordt niet ingeladen in Wordpress

Pagina: 1
Acties:

  • Zeror
  • Registratie: september 2003
  • Laatst online: 15-01 14:05
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:
1
2
3
4
5
6
7
8
9
10
11
@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?

Nintendo ID: Zeror_rk | SW-6670-3316-6323
Stem op 👍: 'Henk' knop (uitproberen?) | Betrouwbare reviews in PW


  • deathgrunt
  • Registratie: maart 2009
  • Niet online
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:
1
2
3
4
5
6
7
8
9
10
11
@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 deathgrunt op 14-04-2015 18:28]


  • Zeror
  • Registratie: september 2003
  • Laatst online: 15-01 14:05
deathgrunt 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]

Nintendo ID: Zeror_rk | SW-6670-3316-6323
Stem op 👍: 'Henk' knop (uitproberen?) | Betrouwbare reviews in PW


  • Zeror
  • Registratie: september 2003
  • Laatst online: 15-01 14:05
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@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;
}

Nintendo ID: Zeror_rk | SW-6670-3316-6323
Stem op 👍: 'Henk' knop (uitproberen?) | Betrouwbare reviews in PW


  • Hiroj
  • Registratie: mei 2010
  • Laatst online: 13-01 09:42
Zeror schreef op woensdag 15 april 2015 @ 16:01:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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
  • Registratie: september 2003
  • Laatst online: 15-01 14:05
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.

Nintendo ID: Zeror_rk | SW-6670-3316-6323
Stem op 👍: 'Henk' knop (uitproberen?) | Betrouwbare reviews in PW


  • deathgrunt
  • Registratie: maart 2009
  • Niet online
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:
1
2
3
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 deathgrunt op 16-04-2015 11:00]


  • Zeror
  • Registratie: september 2003
  • Laatst online: 15-01 14:05
deathgrunt 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.

Nintendo ID: Zeror_rk | SW-6670-3316-6323
Stem op 👍: 'Henk' knop (uitproberen?) | Betrouwbare reviews in PW


  • Spinal
  • Registratie: februari 2001
  • Laatst online: 15-01 13:27
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:
1
2
3
4
5
6
7
8
9
10
11
12
@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.

Full-stack webdeveloper in Groningen


  • deathgrunt
  • Registratie: maart 2009
  • Niet online
...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
  • Registratie: september 2003
  • Laatst online: 15-01 14:05
deathgrunt 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]

Nintendo ID: Zeror_rk | SW-6670-3316-6323
Stem op 👍: 'Henk' knop (uitproberen?) | Betrouwbare reviews in PW


  • deathgrunt
  • Registratie: maart 2009
  • Niet online
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 deathgrunt op 16-04-2015 15:38]


  • Zeror
  • Registratie: september 2003
  • Laatst online: 15-01 14:05
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]

Nintendo ID: Zeror_rk | SW-6670-3316-6323
Stem op 👍: 'Henk' knop (uitproberen?) | Betrouwbare reviews in PW


  • deathgrunt
  • Registratie: maart 2009
  • Niet online
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
  • Registratie: september 2003
  • Laatst online: 15-01 14:05
deathgrunt 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.

Nintendo ID: Zeror_rk | SW-6670-3316-6323
Stem op 👍: 'Henk' knop (uitproberen?) | Betrouwbare reviews in PW


  • BramVroy
  • Registratie: november 2009
  • Laatst online: 02-01 17:46
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
  • Registratie: september 2003
  • Laatst online: 15-01 14:05
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.

Nintendo ID: Zeror_rk | SW-6670-3316-6323
Stem op 👍: 'Henk' knop (uitproberen?) | Betrouwbare reviews in PW


  • Sebazzz
  • Registratie: september 2006
  • Laatst online: 15-01 01:00
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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]

[Website en online portfolio] [Return: realtime retrospective tool] [PokerTime planning poker]

Pagina: 1


Apple iPhone 12 Microsoft Xbox Series X LG CX Google Pixel 5 Sony XH90 / XH92 Samsung Galaxy S21 5G Sony PlayStation 5 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True