Als dit alles is wat je plaatst aan @font-face code dan gaat het zeer zeker niet werken verschillende browsers hebben verschillende lettertypes nodig en deze moeten 100% precies goed geplaatst worden anders werkt het niet. Daarnaar is het verplicht je font tussen 'single quotes' te plaatst in @font-face en wat doet die content; daar?
@font-face {
font-family: content;
src: url('../fonts/GeosansLight.ttf');
}/* TTF file for IE */
@font-face {
font-family: content; font-weight:bold;
src: url('../fonts/GeosansLight.eot');
}
Upload hier je GEO Sans Light en druk en kijk dan welke code je krijgt. plaats deze door copy-/paste in je CSS Reset (daar waar typografie hoort)
*Let op commerciële font mag je niet online gebruiken zonder toestemming en ik wil niet aanzetten tot dat gedrag.
http://www.fontsquirrel.com/fontface/generator
Maar dit is een voorbeeld hoe het eruit zou moeten zien.
CSS Reset:/* @font-face */
@font-face {
font-family: 'champion-flyweight';
src: url('fonts/champion-flyweight.eot');
src: url('fonts/champion-flyweight-0.eot#iefix') format('embedded-opentype'),
url('fonts/champion-flyweight.woff') format('woff'),
url('fonts/champion-flyweight.ttf') format('truetype'),
url('fonts/champion-flyweight.svg#ChampionHTF-Flyweight') format('svg');
font-weight: normal;
font-style: normal;
}
/* Typography */
.... alles typo stijlen..
#nav-wrap-left, #nav-wrap-right, h2.home-title, h3.home-sub { font-family: 'champion-flyweight'; }
/* Homepage (layout) */
h2.home-title, h3.home-sub {
color: #000;
/* Hier moet normaal ook font-size komen */
line-height: 83%;
text-transform: uppercase;
text-align: center;
opacity: 0.3;
display: block;
margin-top: 65px;
}
Succes.
(Bewerkt door Shmoo om 15:54, 7-05-2012)
Gast
