Krijg webfont niet zichtbaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Fokke Nauta

Fokke Nauta

11/02/2019 15:51:32
Quote Anchor link
Hallo allen,
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
 
PHP hulp

PHP hulp

15/02/2019 21:19:23
 
Thomas van den Heuvel

Thomas van den Heuvel

11/02/2019 16:18:18
Quote Anchor link
Kloppen de paden? Deze zijn relatief t.o.v. het stylesheet?
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?
 
Fokke Nauta

Fokke Nauta

11/02/2019 16:49:35
Quote Anchor link
De paden zijn relatief, en kloppen. De fonts zijn ook aanwezig. Als ik om te testen in de body-tag de naam van het tweede font gebruik, zijn die symbolen zichtbaar.

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 ...
 
- Ariën -
Beheerder

- Ariën -

11/02/2019 21:48:49
Quote Anchor link
Kan je anders in JSfiddle een testcase maken?
 
Fokke Nauta

Fokke Nauta

11/02/2019 22:06:31
Quote Anchor link
Dan ga ik me eerst eens verdiepen in wat JSfiddle nu precies is.
 
- Ariën -
Beheerder

- Ariën -

11/02/2019 22:12:22
Quote Anchor link
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.
 
Fokke Nauta

Fokke Nauta

12/02/2019 09:10:16
Quote Anchor link
OK, bedankt. Ik ga ermee aan de slag.

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/
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.