webfont van google word niet goed weergegeven op sommige browsers

Status
Niet open voor verdere reacties.
J

jefkebreda

Gebruiker
Lid geworden
19 apr 2012
Berichten
25
Goedendag,

Ik ben jeffrey en ben een webdeveloper, nu hebben we een website gemaakt via het bekende 960 gridsysteem.

de lettertypes hebben we via een webfont ingevoegd, alleen nu laat hij het bovenste menu niet goed zien op sommige browsers.

het rare is dat als ik het bijvoorbeeld op de zaak op chrome bekijk, het probleem voorkomt terwijl het bij mijn stagebegeleider alleen op firefox is.

thuis op de computer is het ook gewoon goed.

ik heb al een aantal dingen geprobeerd, zoals het menu een klein beetje naar beneden te schuiven (dit gaf hetzelfde resultaat).

en ook de lettertype groter gemaakt, toen was het opgelost alleen was de klant niet tevreden.

in de bijlage vind u een plaatje met het probleem.

probleem.jpg


mijn vraag is wat kan dit zijn?


Alvast bedankt,

Jeffrey
 
Laatst bewerkt:
Ik heb met de FF-extensie Firebug van alles uitgeprobeerd op de website (gelukkig stond de url in je plaatje.)
het ligt niet aan margins, paddings of letterhoogten.
Het lijkt dus een probleem met het font zelf.

Bovendien: als je in de <head>-sectie de link naar het font uitschakelt,
HTML: 
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cantarell">
dan wordt het standaard-lettertype getoond, en dat staat wel goed.
Het lijkt dus echt in het font te zitten.


Effe nog wat anders:
  1. Je loop stage, dus je volgt een opleiding. Heb je op die opleiding niet geleerd dat een specifiek ID maar 1x mag voorkomen in 1 html-pagina? Jij gebruikt id="navigation" voor 2 verschillende div's vlak onder elkaar.
  2. Heb je nog niet geleerd over het (SEO-)belang van een <h1> in je code? En dat je de naam van een site/bedrijf/organisatie nooit alleen als image mag tonen? De naam komt overigens nog wel in een <h2> voor, dat scheelt misschien een beetje.
  3. Effe nog de spelfouten checken: insipirazia, binnehuisarchitectuur
 
tecsman zei:
Ik heb met de FF-extensie Firebug van alles uitgeprobeerd op de website (gelukkig stond de url in je plaatje.)
het ligt niet aan margins, paddings of letterhoogten.
Het lijkt dus een probleem met het font zelf.

Bovendien: als je in de <head>-sectie de link naar het font uitschakelt,
HTML: 
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cantarell">
dan wordt het standaard-lettertype getoond, en dat staat wel goed.
Het lijkt dus echt in het font te zitten.


Effe nog wat anders:
  1. Je loop stage, dus je volgt een opleiding. Heb je op die opleiding niet geleerd dat een specifiek ID maar 1x mag voorkomen in 1 html-pagina? Jij gebruikt id="navigation" voor 2 verschillende div's vlak onder elkaar.
  2. Heb je nog niet geleerd over het (SEO-)belang van een <h1> in je code? En dat je de naam van een site/bedrijf/organisatie nooit alleen als image mag tonen? De naam komt overigens nog wel in een <h2> voor, dat scheelt misschien een beetje.
  3. Effe nog de spelfouten checken: insipirazia, binnehuisarchitectuur
Klik om te vergroten...

take it easy is een opzet ik heb dit niet gecodeerd dat heeft iemand anders gedaan. wij moeten het alleen maar in joomla zetten en goed beheerbaar maken.

ik denk ook dat het aan het font ligt, beetje vaag dat hij op 10px en 14px wel goed word weergegeven maar op 12px niet :confused:


in ieder geval bedankt voor de hulp.
 
OK OK, sorry :)
Maar dan heb je in ieder geval een boodschap om door te geven....
 
tecsman zei:
OK OK, sorry :)
Maar dan heb je in ieder geval een boodschap om door te geven....
Klik om te vergroten...

het is gefixt, het lag aan de link van google, op een of andere vage reden komt het niet goed door. ik heb de font-face kit van cantarell gedownload en in de root gezet en nu werkt het wel.
 
Hoi Jefke,
... font-face kit van cantarell gedownload en in de root gezet en nu werkt het wel.
Klik om te vergroten...
Mmm, op Internet Explorer gaat het nog enigszins, maar in de andere browsers zijn de menu-opschriften in de Cantarell bar & boos. Hier 1:1 screenshots op ware kleuren in Firefox, IE7, Chrome, Opera en Safari:

cantarell.png


- - -

cantarell-2.png

(Firefox, 5x vergroot)​

Nog even gekeken of het de negatieve letter-spatiëring was: {letter-spacing: -1px;}; maar nee dat is 't niet.
Het is gewoon de gebrekkige weergave van de Cantarell op deze lettergrootte, en daar valt weinig aan te doen... :confused:

Bij in FF twee keer inzoomen op alleen de lettergrootte begint het te komen wat het menu betreft, maar dan worden de gewone tekst-letters weer erg lelijk:

cantarell-3.png

Ook eerder al gemerkt dat ingesloten lettertypes het slecht doen: geven browserverschillen, en zijn doorgaans alleen bruikbaar voor koppen en grote letterformaten.

PS: Je weet dat IE7 het bovenmenu niet goed weergeeft? (shotje)

Met vriendelijke groet,
CSShunter
 
beste hunter,


dat is al opgelost alleen heb het nog niet op de server doorgevoerd heb het eerst even lokaal geprobeerd.

toch bedankt voor de hulp.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan