One More Thing » Community » Forum » Pro » Web ontwikkeling » Verschillend lettertype op verschillende computer

Verschillend lettertype op verschillende computer

Profielfoto van El Pablo 10

El Pablo 10 op 15 augustus 2017 #

Ik ben bezig met het maken van een website voor iemand. Hij stuurde mijn vandaag een mail dat het lettertype van een bepaald item veranderd moet worden, terwijl dit lettertype bij mij gewoon goed staat ingesteld en ook zo zichtbaar is op mijn scherm. Wat kan hiervan de oorzaak zijn?

Hij schrijft: In het contactmenu is het lettertype van ‘Menu’ en ‘Verzenden’ niet correct.
De bijlage die hij erbij stuurt ziet er als volgt uit: http://prntscr.com/g8nu4z

Op mijn scherm echter, ziet deze pagina er als volgt uit: http://prntscr.com/g8nuhl

Iemand enig idee hoe dit komt? Het lettertype zou Roboto moeten zijn.

Profielfoto van Hansi2124

Hansi2124 op 15 augustus 2017 #

Waarschijnlijk heeft hij dat lettertype niet geïnstalleerd op zijn computer.
Overigens kan je hier op het forum makkelijk een afbeelding plaatsen met de tag Img.

Profielfoto van jv65

jv65 op 15 augustus 2017 #

Hansi2124 op 15 augustus 2017

Waarschijnlijk heeft hij dat lettertype niet geïnstalleerd op zijn computer.

Daarom kun je ook beter Web Safe Fonts gebruiken.

https://www.w3schools.com/cssref/css_websafe_fonts.asp

Profielfoto van El Pablo 10

El Pablo 10 op 15 augustus 2017 #

Dus, als ik deze CSS regel toevoeg…

input[type=”submit”] {
    font-family:Roboto, “Helvetica Neue”;
}

zou het ok moeten zijn?

Profielfoto van Mac Daddy

Mac Daddy [moderator] op 15 augustus 2017 #

Ik weet niet wat dat Roboto is, maar als men Helvetica Neue op de computer heeft staan wel. Een echt veilige schreefloos font is Arial. Die laadt bij iedereen, maar er zijn meer opties.

Profielfoto van El Pablo 10

El Pablo 10 op 15 augustus 2017 #

En wat betreft het font-weight? Dan kan ik dit niet garanderen dan? Ik bedoel, bij het lettertype Roboto kan ik gaan tot een font-weight van 100, heel dun dus. En dat is wat hier de bedoeling is. Maar de vervangende lettertypen hebben mogelijk niet de variant van 100, toch?

Profielfoto van jv65

jv65 op 15 augustus 2017 #

Kijk hier maar even:

https://www.w3schools.com/cssref/pr_font_weight.asp

Je kan het ook meteen even testen.

Profielfoto van Joid

Joid op 15 augustus 2017 #

Heb je dit wel in je <head> staan?

 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 

En dit gecheckt https://fonts.google.com/selection?query=Roboto&selection.family=Roboto

Profielfoto van El Pablo 10

El Pablo 10 op 15 augustus 2017 #

Voor alle duidelijkheid, bij mij werkt het prima. Ik kan de verschillende lettertypen zien. Wanneer de font-size op 100 is ingesteld, wordt de tekst bij mij dun weergegeven zoals het moet zijn. Het is enkel de persoon voor wie ik de website maak die blijkbaar iets anders te zien krijgt dan mezelf. Bij hem staat de tekst vetter afgebeeld.

Profielfoto van Mac Daddy

Mac Daddy [moderator] op 15 augustus 2017 #

De duidelijkheid die je nog niet geeft, is in welke browser jij de site bekijkt. (En ik welke je hem nog meer test) En welke browser de klant gebruikt.
Als je klant met Windows XP en Internet Explorer zit, dan kan er wellicht heel weinig aan gedaan worden, behalve een upgrade van de klant zijn computer.

Profielfoto van jv65

jv65 op 15 augustus 2017 #

Heeft ie z’n browser al eens ververst?

Ik heb ’t net even getest op een Windows 10 computer met zowel Edge als Internet Explorer, en daar duurt het zeker 5 seconden voordat het juiste lettertype wordt geladen. Je ziet dus eerst een ander (Times) lettertype. Met andere woorden: de site/stylesheet is niet 100% Windows compatible.

Profielfoto van Night

Night [moderator] op 15 augustus 2017 #

Roboto is een Google (websafe) font. Kijk even naar de post van Joid, incl. fontweights.

Doorloop anders even deze stappen: https://www.w3schools.com/howto/howto_google_fonts.asp

Profielfoto van feek

feek op 15 augustus 2017 #

Als de de regel zoals @joid  aangeeft, wordt alleen Roboto regular geladen en niet de andere font-weights.

 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 

Als je zelf wel Roboto hebt geïnstalleerd, worden de dunnere versies wel weergegeven, maar bij anderen niet. Overigens is Helvetica Neue ook niet op alle computers geïnstalleerd.

dus je moet alles laden (ook cursief en bold):

 
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i" rel="stylesheet">
 
Profielfoto van El Pablo 10

El Pablo 10 op 16 augustus 2017 #

Ik heb geen idee welke browser “mijn klant” gebruikt, maar zijn vorige website (die ik moest namaken) bevat ook het font Roboto, dus dat kon ie toen wel zien blijkbaar.

Volgens mij zit het probleem bij het thema dat ik gebruik. Ik selecteer namelijk het font voor de headings via de customizer, maar ik heb gemerkt dat, met uitzondering van de homepagina, ik de titels op de andere pagina’s niet meer in het vet kan zetten via CSS??!!

Profielfoto van Mac Daddy

Mac Daddy [moderator] op 16 augustus 2017 #

Misschien moet je dan even navragen welke browser de klant gebruikt. Dat kan namelijk helpen bij een oplossing voor het probleem. Dat het bij een andere site wel werkte, zegt weinig als het een ander thema is.

Het probleem zou heel goed in het thema kunnen zitten, maar wellicht i.c.m. de klant zijn browser. Of wellicht heeft hij/zij toevallig een plugin/add-on draaien die dit probleem veroorzaakt. Heeft de klant een tablet of smartphone? Ziet het er daarop wel goed uit?

De laatst informatie die je nu geeft, is ook van belang ja. Als de aanpassingen die jij doet in de customizer ook de CSS aanpast en jij probeert daarna zelf in de CSS iets aan te passen, dan kan dat problemen veroorzaken. Maar het blijft dan nog steeds opvallend dat jij het wel goed ziet in de browsers die je test en de klant het niet goed ziet.

Profielfoto van Shmoo

Shmoo op 16 augustus 2017 #

Probeer maar eens in je CSS dat Roboto in single quotes te zetten. Dat is volgens mij verplicht op Windows.

 
 
font-family: 'Roboto', ..... 
 
 
Profielfoto van Jakko Westerbeke

Jakko Westerbeke op 16 augustus 2017 #

Aanhalingstekens zijn alleen nodig als er tekens in de naam staan, anders dan letters A–Z, a–z, cijfers 0–9, de streepjes – en _, en Unicode-tekens U+00A0 en hoger, of als de naam niet voldoet aan bepaalde regels. Voor lettertypenamen die uit één woord bestaan en alleen Latijnse letters bevatten, heb je geen aanhalingstekens nodig:

Font family names other than generic families must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

Dus

font-family: Roboto, "Helvetica Neue", Arial, sans-serif;

zou moeten werken in alle browsers die aan de specificatie voldoen.

Profielfoto van Joid

Joid op 17 augustus 2017 #

@Jakko

Ja, mits het lettertype eerst in de  wordt aangeroepen. Roboto staat standaard niet op een computer, in tegen stelling tot Arial, Verdana, etc.

Om dat probleem op te lossen heeft Google al deze webfonts ter beschikking gesteld. En Roboto is dus zo’n webfont.

TS zou die pagina ook op een iPad kunnen testen. Daar staat standaard ook geen Roboto op. En dan is die lettertype niet zomaar zichtbaar als je hem alleen in de CSS benoemt.
Hij moet dus ook in de  staan.

Profielfoto van Shmoo

Shmoo op 17 augustus 2017 #

Dit heeft niets met standaard CSS font-family definities te maken maar wat je hier ziet gebeuren is onderdeel van @font-face.

@font-face is gewoon een eigen brouwsel dat toevallig heel populair en een algemene standaard is geworden maar elke browser reageert daar natuurlijk anders op.
Die van Microsoft heeft toevallig de single quotes nodig om te functioneren. Andere brossers tackelen dit probleem zelf in de core.

Kijk maar naar de voorbeelden die Google en andere sites geven dit soort fonts aanbieden. Ze zetten allemaal bewust ‘Roboto’ tussen single quptes, juist om dit gedoe te voorkomen. Als je de CSS standaarden zou volgen dan is dit idd./ niet nodig omdat Roboto een woord is zonder spaties.

Profielfoto van Joid

Joid op 18 augustus 2017 #

@Jakko
Ja, mits het lettertype eerst in de  wordt aangeroepen. Roboto staat standaard niet op een computer, in tegen stelling tot Arial, Verdana, etc.
Om dat probleem op te lossen heeft Google al deze webfonts ter beschikking gesteld. En Roboto is dus zo’n webfont.
TS zou die pagina ook op een iPad kunnen testen. Daar staat standaard ook geen Roboto op. En dan is die lettertype niet zomaar zichtbaar als je hem alleen in de CSS benoemt.
Hij moet dus ook in de  staan.

Waar dus die dubbele spaties staan moet

 
<head>
 

staan

Over dit topic

Gestart op 15 augustus 2017 door El Pablo 10

Laatste reactie door Joid

Je kunt alleen reageren met een gratis OMT account.
Heb je geen OMT account? Registreer je dan nu gratis!

Inloggen

 

of Wachtwoord resetten?