05
Nov
4
Nov
4
15 tips på snygga webb fonter med CSS @fontface – och hur man gör
Att använda @font-face regeln är som kanske många vet ingen ny egenskap för CSS3. Det fanns även för CSS2 och funkar också för Internet Explorer 6.0. Dock så läser Internet Explorer inte TTF format så bra så det finns en liten lösning för detta. Besök ttf2eot för konvertera TTF till EOT.
Hur man lägger in detta på din webbsida är en ganska enkelt egentligen. Börja med att Öppna din style.css och droppa denna kod snutt:
@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
@font-face {
font-family: Delicious;
font-weight: bold;
src: url('Delicious-Bold.otf');
}
Och:
h2 { font-family: Delicious, sans-serif; color:#000;}
Så ska det se ut nåt sånt här i dina h2 taggar:
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Snyggt va! Nu har vi gått igenom enkelt hur vi lägger in inbäddade special fonter på din webbsida. Men vart hittar man häftiga fonter då.. Här kommer 15 rekommenderande fonter av lite olika slag. Notera att dessa fonter går självklart att användas till dina design projekt.
Nevis
Miso
Delicious
JustOldFashion
DejaVu Sans
Komika Axis
Octin College Free
Tiza
Journal
Anonymous
Aurulent Sans
Bitstream Vera Sans
Bitstream Vera Sans
Kontrapunkt
Kontrapunkt
Johan jobbar som Interaktiondesigner på Cypoint där han får syssla med interaktionsdesign, webbdesign och visuell kommunikation som är riktat till E-handel, webb och mobila lösningar. Se mer om Johan Pettersson.
Relaterade inlägg
Anton Ranestam (November 5, 2009 at 17:42)
Mycket bra bloggpost!
Jag ska definitivt använda mig av denna teknik till mitt nästa projekt.
Johannes Holmberg (November 7, 2009 at 03:31)
Bra initiativ Johan! Kul att du tar upp font-face, det är en riktigt smidig lösning som kan “hotta” upp många sajter.
Mikael (November 18, 2009 at 17:41)
Vilken tur att jag kollade in här, hittade fonten Journal som jag behöver. Kanon!
Patrik Kekäläinen (December 21, 2009 at 21:11)
Kalasbra inlägg! Kanske detta kan vara ett bra substitut till Sifr?!