CSS/HTML font-family toont niet op mobiel

Status
Niet open voor verdere reacties.
pilootnour5

pilootnour5

Terugkerende gebruiker
Lid geworden
22 nov 2008
Berichten
1.895
Ik probeer voor een aantal teksten op mijn website een andere font-family toe te passen. Als hoofdfont gebruik ik Ubuntu welke ik via Google Fonts verkrijg.
Als afwijkende font is er Interstate welke ik als ttf bestand op mijn webruimte heb staan.

Ik wijzig de font met de code

HTML: 
<a *allemaal niet relevante informatie* style="font-family: interstate; src: url(interstate.ttf);">test</a>

Dit werkt op desktop/laptop maar niet op mijn iPhone. Wat is hiervoor de reden? Er wordt in plaats van interstate ook geen gebruik gemaakt van de Ubuntu maar het lijkt op iets van Times New Roman o.i.d. Zie bijlage voor wat het moet zijn, en hoe het op mobiel eruit ziet.

Wat doe ik fout? Ik hoor het graag en alvast bedankt! :)

Schermafbeelding 2018-03-19 om 18.32.12.pngIMG_0162.jpg
 
Als je een font van je eigen website gebruikt en je wilt de weergave zowel cross-browser als cross-platform hebben dan heb je meerdere font extensies nodig. Het minimum wat je nodig hebt is woff, woff2 en ttf. Daarmee werkt het op alle (ook wat oudere) browsers, op desktop, iOS, Android en in mobile-specifieke browsers.
Code: 
1. Google Fonts:
Zet dit in de <head> van je html

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

2. Font op eigen website:
Zet dit bovenaan in je stylesheet

/* gebruik bij elke url alleen kleine letters! */
@font-face {
  font-family: 'Roboto';
  src: url(http://www.example.nl/fonts/roboto.woff2) format('woff2'),
       url(http://www.example.nl/fonts/roboto.woff) format('woff'),
       url(http://www.example.nl/fonts/roboto.ttf) format('truetype');
}

3. Hoe gebruiken?
Zet dit in je stylesheet op het element waar je het font nodig hebt
(met sans-serif als fallback)

h1 {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400; /* eventueel veranderen in jouw letterdikte */
}
woff2 is de nieuwe standaard, zit al in een aantal moderne browsers.
woff is de vorige/huidige standaard maar geen support in Android die ouder is dan versie 5.
ttf is de fallback voor Android ouder dan versie 5.

Suc6. Have fun.
 
Laatst bewerkt:
Wederom bedankt voor je bericht.

Je zegt "Zet dit in je stylesheet op het element waar je het font nodig hebt". Stel dat ik het in wil zetten voor een specifiek stuk tekst. Ik begrijp dat <font> niet meer wordt ondersteund in HTML5 en dat ik het met CSS zou moeten aanpakken, maar hoe doe ik dat zonder de font van de hele website te veranderen?

Zie onderstaande:

<p>Deze tekst moet gewoon in de normale font weergegeven worden....</p>

<p>Deze tekst moet in de custom font weergegeven worden</p>

<p>Deze tekst moet weer gewoon in de normale font weergegeven worden</p>
 
Laatst bewerkt:
Je gebruikt hiervoor in je html én stylesheet een class, bijvoorbeeld "interstate" (fontnaam, maar je mag zelf een andere naam verzinnen als je dat wilt).
Code: 
[B]html[/B]
<p>Deze tekst moet gewoon in de normale font weergegeven worden....</p>
<p class="interstate">Deze tekst moet in de custom font weergegeven worden</p>
<p>Deze tekst moet weer gewoon in de normale font weergegeven worden</p>

[B]stylesheet[/B]
.interstate {
  font-family: 'Interstate', sans-serif;
  font-style: normal;
  font-weight: 400; /* eventueel veranderen in jouw letterdikte */
}
Je mag class="interstate" overal op elk element in de html toepassen.
Inderdaad mag je in html 5 geen opmaak meer gebruiken, dat is allemaal naar de stylesheet verplaatst.
 
Laatst bewerkt:
Heel erg bedankt, ik ga ermee aan de slag! :)

Edit:
Ik heb nu het volgende in de style staan
HTML: 
/*Interstate font*/
	@font-face {
      font-family: 'Interstate';
      src: url(http://mijndomein.nl/interstate.woff2) format('woff2'),
           url(http://mijndomein.nl/interstate.woff) format('woff'),
           url(http://mijndomein.nl/interstate.ttf) format('truetype');
    }
    
	.interstate {
      font-family: 'Interstate', sans-serif;
      font-style: normal;
      font-weight: 400; /* eventueel veranderen in jouw letterdikte */
    }

Op computer werkt het nu met de class="interstate", echter zie ik dat op mobiel wordt overgegaan op sans-serif... Hij weigert het nog steeds te doen op mobiel. Enige ideeën nog? Overigens, Interstate staat niet op google fonts, dus daar heb ik ook geen bron van, vandaar dat ik het lettertype ook op mijn eigen domein heb staan.
 
Laatst bewerkt:
Heb je 3 font bestanden? Dus de .woff2 en de .woff en de .ttf ?

Als ik bijvoorbeeld op deze site kijk dan wordt alleen het .ttf bestand aangeboden zonder het .woff2 en .woff bestand. Als je geen .woff en .woff2 bestand hebt dan zijn er conversie websites, bijv. deze site voor ttf > woff. Als conversie niet lukt google dan even op: convert ttf to woff woff2

Welke versie iOS gebruik je op je iPhone?
Kan je bij iemand anders even kijken of het werkt op Android?
 
Laatst bewerkt:
Ik heb inderdaad 3 bestanden, 4 zelfs. Heb in eerste instantie een conversie bestand gemaakt uit de ttf (woff en woff2) en heb later nog originele woff en woff2 en zelfs nog een eot gevonden, maar ook deze geen succes. Vraag me af wat er fout gaat.
 
Mogelijk corrupte bestanden. Hier (klik) kan je alles nog eens nalezen.

Aanvulling: Het lijkt erop dat je toch de svg nodig hebt.
Conversie kan eventueel hier denk ik https://www.fontsquirrel.com/tools/webfont-generator
Code: 
@font-face {
  font-family: 'Interstate';
  src: url(http://www.example.nl/interstate.eot);
  src: url(http://www.example.nl/interstate.eot?#iefix) format('embedded-opentype'),
       url(http://www.example.nl/interstate.woff2) format('woff2'),
       url(http://www.example.nl/interstate.woff) format('woff'),
       url(http://www.example.nl/interstate.ttf) format('truetype'),
       url(http://www.example.nl/interstate.svg#IDIDID) format('svg')
}
Voor de IDIDID moet je in het svg bestand kijken. Daar zie je een regel die er ongeveer zo uit ziet
<font id="webfontSRj8j0PE" horiz-adv-x="1058">
In dit voorbeeld wordt de IDIDID: webfontSRj8j0P ( er staat dan interstate.svg#webfontSRj8j0P )
 
Laatst bewerkt:
Ik heb het even gelaten door tijdgebrek. Even later weer geprobeerd en ineens werkt het. Niks veranderd, of ik heb de vorige keer iets fout gedaan. In ieder geval met de laatst getoonde code werkt het. Bedankt voor je hulp! :)
 
Nog een vraagje, heb je het laatste stukje...
Code: 
       url(http://www.example.nl/interstate.woff) format('woff'),
       url(http://www.example.nl/interstate.ttf) format('truetype'),
       url(http://www.example.nl/interstate.svg#IDIDID) format('svg')
}

... veranderd in ...
Code: 
       url(http://www.example.nl/interstate.woff) format('woff'),
       url(http://www.example.nl/interstate.ttf) format('truetype')
}

om te voorkomen dat er een 404 fout is omdat het svg bestand niet bestaat.

Noot: let op de komma's. Achter de laatste url regel geen komma.
 
De svg heb ik inderdaad weggelaten, en ik heb ook op de komma gelet.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan