20 berichten aan het bekijken - 1 tot 20 (van in totaal 20)
  • Q:

    Bijdrager
    El Pablo 10

    Verschillend lettertype op verschillende computer

    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.


    Bijdrager
    Hansi2124

    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.


    Bijdrager
    jv65
    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


    Bijdrager
    El Pablo 10

    Dus, als ik deze CSS regel toevoeg…

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

    zou het ok moeten zijn?


    Moderator
    Mac Daddy

    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.


    Bijdrager
    El Pablo 10

    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?


    Bijdrager
    jv65

    Kijk hier maar even:

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

    Je kan het ook meteen even testen.


    Bijdrager
    Joid

    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

    • Deze reactie is gewijzigd 6 maanden, 1 week geleden door  Joid.

    Bijdrager
    El Pablo 10

    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.


    Moderator
    Mac Daddy

    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.

    • Deze reactie is gewijzigd 6 maanden, 1 week geleden door  Mac Daddy.

    Bijdrager
    jv65

    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.


    Moderator
    Night

    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

    • Deze reactie is gewijzigd 6 maanden, 1 week geleden door  Night.

    Bijdrager
    feek

    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">
     

    Bijdrager
    El Pablo 10

    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??!!


    Moderator
    Mac Daddy

    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.


    Bijdrager
    Shmoo

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

     
     
    font-family: 'Roboto', ..... 
     
     

    Bijdrager
    Jakko Westerbeke

    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.


    Bijdrager
    Joid

    @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.


    Bijdrager
    Shmoo

    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.


    Bijdrager
    Joid

    @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

20 berichten aan het bekijken - 1 tot 20 (van in totaal 20)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.