Als eerste,
– Vergeet niet dat je niet zomaar alle fonts online kunt zetten en gebruiken online. Vaak zijn de eigenaren van Commerciële Fonts hier redelijk actief op. En kan het geld kosten als je dit zomaar doet. Ik heb geen idee als jij gebruikt maakt van een Font waarvan jij de rechten niet hebt maar ik wil het toch even gezegd hebben.
– Iets waar @font-face heel gevoelig voor is en dat heel vaak fout gaat is het simpele copy-/pasten van de CSS code.
In het voorbeeld staat dit:
@font-face {
font-family: 'DINNextLTProCondensed';
src: url('dinnextltpro-condensed-webfont-webfont.eot');
src: url('dinnextltpro-condensed-webfont-webfont.eot?#iefix') format('embedded-opentype'),
url('dinnextltpro-condensed-webfont-webfont.woff') format('woff'),
url('dinnextltpro-condensed-webfont-webfont.ttf') format('truetype'),
url('dinnextltpro-condensed-webfont-webfont.svg#DINNextLTProCondensed') format('svg');
font-weight: normal;
font-style: normal;
}
En jij roept dit aan:
font-family: "DINNextLTProCondensed";
Zie je dat jij ” “ gebruikt en de default code van @font-face ‘ ‘ ? Verander dat even naar het origineel want soms willen browsers hier nog wel eens op mis-lopen en daarom het font niet tonen.
Als je @font-face gebruikt altijd 100% copy-/paste van de default code.
– Maar waar het vaak fout gaat is het Path van de CSS naar het Font bestand zelf.
Zelf doe ik het nooit op deze manier. met een extra stylesheet.css voor alleen de @font-face onderdelen.
Ik doe het meestal zo:
[style.css]
Reset - van Eric blablabla..
....
/* Typografie Reset */
@font-face {
font-family: 'DINNextLTProCondensed';
src: url('fonts/dinnextltpro-condensed-webfont-webfont.eot');
src: url('fonts/dinnextltpro-condensed-webfont-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/dinnextltpro-condensed-webfont-webfont.woff') format('woff'),
url('fonts/dinnextltpro-condensed-webfont-webfont.ttf') format('truetype'),
url('fonts/dinnextltpro-condensed-webfont-webfont.svg#DINNextLTProCondensed') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'DINNextLTProCondensed';
.....
}
En dan maak ik een mapje fonts aan die ik gewoon in het Thema-folder plaats en daar gooi ik alle font-bestanden in.
Zie je dat ik fonts/ voor het Path naar het bestand zet.
