Krijg webfont niet zichtbaar
Heb o.a. dit in mijn style sheet staan:
@font-face {
font-family: 'incised901_ndit_btitalic';
src: url('../fonts/incised901_ndit_bt_italic-webfont.eot');
src: url('../fonts/incised901_ndit_bt_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/incised901_ndit_bt_italic-webfont.woff') format('woff'),
url('../fonts/incised901_ndit_bt_italic-webfont.ttf') format('truetype'),
url('../fonts/incised901_ndit_bt_italic-webfont.svg#incised901_ndit_btitalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'web_symbolsregular';
src: url('../fonts/websymbols-regular-webfont.eot');
src: url('../fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/websymbols-regular-webfont.woff') format('woff'),
url('../fonts/websymbols-regular-webfont.ttf') format('truetype'),
url('../fonts/websymbols-regular-webfont.svg#web_symbolsregular') format('svg');
font-weight: normal;
font-style: normal;
}
BODY {
font-family: incised901_ndit_btitalic;
}
.nextprev {
font-family: web_symbolsregular;
}
Niet belangrijke zaken weggelaten.
Op de webpagina's is het font incised901_ndit_btitalic te zien.
Stukje code in de pagina:
<div class="nextprev">
<p>89</p>
</div>
De karakters 8 en 9 in de class nextprev zijn echter niet in het font web_symbolsregular te zien.
Hoe kan dat? Wat doe ik fout?
Alvast dankt voor eventuele reacties.
Fokke Nauta
Heb je browsercache uit staan en/of heb je de pagina een harde refresh gegeven?
Het enige verschil tussen de eerste variant die wel werkt en de tweede die niet werkt zijn min-tekens versus underscores in de namen van de bestanden, weet je zeker dat de namen kloppen?
Koppel je wellicht een stijl aan de p-tag? Die overruled dan waarschijnlijk "nextprev", tenzij je hier wellicht ".nextprev p" van maakt.
De naam van het fonttype via font-family moet ook tussen quotes?
Bedankt!
De namen kloppen.
Er is geen stijl aan een p-tag gekoppeld. Alleen het eerste font in de BODY-tag.
Hoe het met die quotes zit, weet ik niet. Het eerste font is overal zichtbaar, zonder quotes bij font family. Dus dat moet werken.
Ik heb een nieuwe pagina aangemaakt, met @font-face van het tweede font in de header, en p gekoppeld aan dat font, en dat werkt.
Maar waarom het in mijn pagina niet werkt, is me een raadsel ...
Kan je anders in JSfiddle een testcase maken?
Dan ga ik me eerst eens verdiepen in wat JSfiddle nu precies is.
JSFiddle is een sandbox voor kleine snippets aan styling en scripting. Zo kan je dus HTML, JS, en CSS testen en deze testcases delen met anderen hier. Een voorbeeldje is dit.
Toevoeging op 12/02/2019 10:01:36:
Account aangemaakt.
Kan HTML en CSS code wel op de pagina plaatsen, maar hoe krijg ik mijn webfonts in JSfiddle?
Toevoeging op 12/02/2019 10:50:11:
Dit is de link naar JSfiddle. Overbodige tags en content zijn verwijderd.
https://jsfiddle.net/FokkeNauta/2pgf46em/3/