[Wordpress] Font Open Sans laad alleen na inloggen

[Vitruvius]

Goede dag Tweakers,

Ik ben momenteel bezig met het maken van een website voor ons bedrijf maar loop tegen een vervelend feit aan. Zodra ik uit Wordpress log op mijn Safari rendert het font, Open Sans, niet meer op de juiste manier. Met als gevolg dat het menu te breed wordt en daardoor het complete menu niet meer op 1 regel past.
Wanneer ik de website, www.bigmouseproductions.nl vervolgens laad in Chrome, rendert hij wel goed. Een screenshot van het probleem:



Zoals je ziet past het menu du niet meer en is het font dan ook werkelijk anders, dikker en vooral lelijker.

Onder Theme options kan je de code van Open Sans invoeren, ik heb dat dan ook netjes gedaan.

Headings Google Font Link

code:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Headings Google Font Family

code:

font-family: 'Open Sans', sans-serif;

Hoe kan ik dit het beste oplossen? Alvast bedankt!

[Rikkiz0r]

De content van je menu is gewoon te breed, als ik de font-size hier aan pas naar 13px gaat het wel goed.
Ik krijg hier gewoon netjes Open Sans dus.

Andere oplossing is overigens om de font-weight aan te passen:

code:

#main-navigation li a {
    font-family: "Open Sans","Droid Sans","Verdana",sans-serif;
    font-size: 14px;
    font-weight: 400;
}

[ Voor 59% gewijzigd door Rikkiz0r op 18-07-2015 18:07 ]

[Vitruvius]

Hij wordt te breed omdat ie hem niet goed rendert, als je de foto opent dan zie je ook dat het niet hetzelfde lettertype is. Ik ben vooral opzoek naar de oorzaak waarom er een verschil is met in en uitloggen, een ander lettertype of kleiner maken had ik zelf ook al geprobeerd, toch bedankt!

[Rikkiz0r]

Als je de font-weight op 400 of 500 zet is het lettertype als het goed is hetzelfde als in Safari wanneer je bent ingelogd.

Ik denk overigens dat als je bent ingelogd dat er wat extra CSS ingeladen wordt; en die override misschien de style in dat menu.

[Vitruvius]

Ik heb je code even erin gezet, hij is dan inderdaad in beide hetzelfde, alleen het lettertype in de banner eronder is dan nog verschillend. Ik ga nu de font-weight op 400 zetten. Moment!

[Vitruvius]

Ik heb deze codes gebruikt maar beide maakt geen verschil helaas.

code:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

code:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>

[Zeror]

Mooiste manier is eigenlijk om je fontfiles te enqueue'en in de functions.php van het Wordpress theme. Dat werkt namelijk altijd goed.

Hier is een tutorialvideo die dat duidelijk uitlegt

klik

[ Voor 6% gewijzigd door Zeror op 18-07-2015 18:26 ]

[Vitruvius]

Ik heb de ontwerper van het Thema gevraagd of hij dat voor mij kan doen, dankjewel.

[_Thanatos_]

Het is sowieso niet slim om het breken van je ontwerp af te laten hangen van fonts die wel of niet inladen (en de hoeveelheid tekst). Die menu-items kun je ook *altijd* laten passen - daar zijn genoeg technieken voor.

Waarom zouden fonts niet laden?
Ook daar zijn tal van redenen voor te bedenken. Maar als het kapot kan, ga er maar vanuit dat het ergens ooit kapot is.

Oh en trouwens, als je ECHT de fonts van google MOET gebruiken (doe dat in godsnaam niet, maar als het MOET van iemand), gebruik dan in vredesnaam geen http://... links, maar //... links. Anders weet je 100% zeker dat je fonts niet werken op https.

[Verwijderd]

_Thanatos_ schreef op maandag 20 juli 2015 @ 04:32:Oh en trouwens, als je ECHT de fonts van google MOET gebruiken (doe dat in godsnaam niet

Waarom niet?

[Krilo_89]

Verwijderd schreef op maandag 20 juli 2015 @ 08:20:
[.. - niet via google laden - ..]
Waarom niet?

Hier ben ik ook wel benieuwd naar?

Robberto schreef op zaterdag 18 juli 2015 @ 18:21:
Ik heb deze codes gebruikt maar beide maakt geen verschil helaas.

code:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

code:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>

Je hebt nadat je de url's van Google hebt veranderd (300 en 400), ook je CSS overal aangepast? Want je hebt niets aan font-weight: 400, wanneer je de url van 300 gebruikt.

Waar in je header heb je de fonts van google geïnclude? Want zijn de CSS styles van je menu items wanneer je ingelogd bent en wat zijn ze wanneer je uitgelogd bent?

- edit -
Bij mij zie ik je menu items wel gewoon op 1 regel staan, dus dat klopt wel denk ik. Alleen heb je als lettertype na Open Sans opgegeven dat er Droid Sans gebruikt moet worden. Dit is een veel breder lettertype, dus misschien niet zo slim om als fallback te gebruiken.

Ook moet je de site even door een validator gooien, want in je broncode zie ik bijv. voor het openen van je doctype, lege regels.
Ook laad jij bovenin de Open Sans van Google in met (<!-- custom typography -->) en daaronder een hele lading met ander stylesheets, waaronder:

code:

<link rel='stylesheet' id='google-fonts-css'  href='http://fonts.googleapis.com/css?family=Raleway%3A400%2C300%2C500%2C600%7COpen+Sans&ver=1.0' type='text/css' media='all' />

Dat is niet echt handig, 2 keer Google fonts inladen, met 2 keer hetzelfde lettertype?

[ Voor 30% gewijzigd door Krilo_89 op 20-07-2015 11:33 ]

[_Thanatos_]

Verwijderd schreef op maandag 20 juli 2015 @ 08:20:
[...]


Waarom niet?

1) Omdat Google dan van je bezoekers weet dat ze op je site komen. Dat vind jij misschien niet erg, maar je legt het aan je bezoekers op, die dat misschien wel erg vinden.
2) Het is vaak trager dan de rest van je site, waardoor je altijd met een FOUT (flash of unstyled text) moet kampen. Met self-hosted fonts is het downloaden van fonts tenminste even snel als je website.
3) Het kan geblokkeerd zijn of totaal niet werken, en jij hebt daar 0,0 invloed op. Je bezoekers kunnen erover klagen, jij ergert je eraan, en je kunt er niets aan veranderen.
4) De code die eruit komt doet in grote mate browser sniffing, dus het is altijd maar de vraag in hoeverre het werkt voor een browser die nét ff niet meewerkt. Aannemen dat Google dat allemaal wel test is niet verstandig, want Google maakt van wel meer dingen een janboeltje.
5) Je laad een extra stuk css in, en dáárna pas een extra font. Je laadt dus meer extra resources in dan noodzakelijk.

[Zeror]

Dan download je de google fonts en ga je die zelf hosten. Is ook niet echt spannend om te doen. Probleem opgelost.

[Krilo_89]

_Thanatos_ schreef op maandag 20 juli 2015 @ 21:48:
[...]

1) Omdat Google dan van je bezoekers weet dat ze op je site komen. Dat vind jij misschien niet erg, maar je legt het aan je bezoekers op, die dat misschien wel erg vinden.
2) Het is vaak trager dan de rest van je site, waardoor je altijd met een FOUT (flash of unstyled text) moet kampen. Met self-hosted fonts is het downloaden van fonts tenminste even snel als je website.
3) Het kan geblokkeerd zijn of totaal niet werken, en jij hebt daar 0,0 invloed op. Je bezoekers kunnen erover klagen, jij ergert je eraan, en je kunt er niets aan veranderen.
4) De code die eruit komt doet in grote mate browser sniffing, dus het is altijd maar de vraag in hoeverre het werkt voor een browser die nét ff niet meewerkt. Aannemen dat Google dat allemaal wel test is niet verstandig, want Google maakt van wel meer dingen een janboeltje.
5) Je laad een extra stuk css in, en dáárna pas een extra font. Je laadt dus meer extra resources in dan noodzakelijk.

Ik ben het niet helemaal eens met je 5 punten:
1. Je kunt de font's asynchroon inladen, dus geen probleem.
2. Flash of unstyled tekst? Pak gewoon een fallback font en klaar.
3. Als hij geblokkeerd wordt heb je met bovenstaande regel gelijk een goede fallback (die je sowieso moet hebben om ervoor te zorgen dat je website ook met 2e en 3e of 4e font goed draait. Sowieso weten mensen niet welke font's jij in laad via Google, dus wanneer ze geblokkeerd worden en je hebt een ander font, hoe weten mensen dan niet dat jij het zo bedoelde?
4. Dat Google ergens een janboeltje van maakt, dat weet ik niet. Voor zover ik weet gebruikt de hele wereld Google en heb ik nog nooit downtime gehad van iets van Google. Het lijkt me logischer dat je eigen server problemen heeft dan Google.
5. Asynchroon inladen en het laden van servers van 3e (CDN networks) kan sneller zijn dan alles van je eigen server halen, omdat je browser niet tegelijkertijd meerdere files kan downloaden, maar één voor één doet. Je browser kan wel meerdere bestanden tegelijk downloaden wanneer ze van andere servers komen. (het zou dus nog sneller kunnen werken ook).
Plus dat fonts van Google gecached kunnen worden, doordat meerdere websites dit inladen.

Maar goed, het 2 keer inladen Google fonts zorgt er wel voor dat er 1 overbodig is.

[8088]

Krilo_89 schreef op dinsdag 21 juli 2015 @ 22:19:
5. Asynchroon inladen en het laden van servers van 3e (CDN networks) kan sneller zijn dan alles van je eigen server halen, omdat je browser niet tegelijkertijd meerdere files kan downloaden, maar één voor één doet. Je browser kan wel meerdere bestanden tegelijk downloaden wanneer ze van andere servers komen. (het zou dus nog sneller kunnen werken ook).

Tot voor kort schreef de standaard maximaal twee concurrent connections voor, maar zelfs dat werd door veel clients ruimschoots overschreden. Tegenwoordig zijn clients daar nog een stuk vrijer in.

Om nog meer parallel te serveren, zou je je statische content ook op een eigen subdomein kunnen zetten.

[_Thanatos_]

Krilo_89 schreef op dinsdag 21 juli 2015 @ 22:19:
[...]


Ik ben het niet helemaal eens met je 5 punten:
1. Je kunt de font's asynchroon inladen, dus geen probleem.
2. Flash of unstyled tekst? Pak gewoon een fallback font en klaar.
3. Als hij geblokkeerd wordt heb je met bovenstaande regel gelijk een goede fallback (die je sowieso moet hebben om ervoor te zorgen dat je website ook met 2e en 3e of 4e font goed draait. Sowieso weten mensen niet welke font's jij in laad via Google, dus wanneer ze geblokkeerd worden en je hebt een ander font, hoe weten mensen dan niet dat jij het zo bedoelde?
4. Dat Google ergens een janboeltje van maakt, dat weet ik niet. Voor zover ik weet gebruikt de hele wereld Google en heb ik nog nooit downtime gehad van iets van Google. Het lijkt me logischer dat je eigen server problemen heeft dan Google.
5. Asynchroon inladen en het laden van servers van 3e (CDN networks) kan sneller zijn dan alles van je eigen server halen, omdat je browser niet tegelijkertijd meerdere files kan downloaden, maar één voor één doet. Je browser kan wel meerdere bestanden tegelijk downloaden wanneer ze van andere servers komen. (het zou dus nog sneller kunnen werken ook).
Plus dat fonts van Google gecached kunnen worden, doordat meerdere websites dit inladen.

Maar goed, het 2 keer inladen Google fonts zorgt er wel voor dat er 1 overbodig is.

1. Dat moet Google dan ook doen, als je dat denkt te moeten gebruiken, en zoals eerder al aangehaald, je hebt er geen controle over. Daarbij is het nog altijd aan de browser hoe en wanneer de fonts gedownload worden. Je kunt hooguit hinten, maar niet forceren.
2. Dat IS de flash of unstyled text. En een fallback font is natuurlijk prima, maar hoe trager je fonts laden, hoe langer die flash duurt. Idealiter laden je fonts even snel als je website, wat de FOUT korter maakt, maar bij google fonts is dat zeer zeker niet het geval.
3. Het doet niet terzake of bezoekers zien dat je fonts niet werken. Wat terzake doet, is (in het geval van dit topic) een font de layout van je website maakt of breekt.In dat opzicht kan het niet laden van een font dus wel degelijk desastreuze gevolgen hebben.
4. Dude, ik weet prima waar ik het over heb. Het is "niet bepaald" de eerste keer dat ik tegen google fonts aan zit te vloeken, en ik weet verdomd goed waar en hoe ik dat moet debuggen. Los van mijn ego is het een bijzonder onverstandig idee om er maar blindelings vanuit te gaan dat Google z'n zaakjes 100% perfect op orde heeft, want dat hebben ze niet.
5. Asynchroon inladen is so simpel als een (of twee) subdomeinen te maken speciaal voor static content (css, fonts, js, plaatjes). Daar heb je geen complete delivery network voor nodig, tenzij je de rest van je site ook via een CDN host.