110 Awesome Websites Using CSS3 @Font-Face

@font-face is a CSS3 property that allows web designers to use custom typefaces on a website that aren’t installed on the browsers computer. This means that designers can now start to move away from web-safe fonts such as Arial, Georgia, Times New Roman, Verdana, Trebuchet and the gorgeous Comic Sans and replace them custom fonts.

In this post, we have gathered 110 awesome websites using CSS3 @font-face. If you have any of your own typography web design, we’d love to see them in the comments. Just share a link to your own website below!

Talent Garden

font-face-web-design-123

@font-face : BelloScript, SohoStdMedium.

Nerdo Design Collective

Nerdo Design Collective

@font-face : NRD-Cond ,NRD-Light ,NRD- .

4lex.cat

4lex.cat

@font-face : ProximaNova ,delicious.

Life in the Bubble

Life in the Bubble

@font-face : Sassoon .

BlueView Agency

BlueView Agency

@font-face : GeogrotesqueSemi.

iPairs HD

iPairs HD

@font-face : MuseoSlab500 ,SnicklesRegula .

Au Petit Panisse

Au Petit Panisse

@font-face : Foglihten , RalewayThin .

Qasim Aziz Portfolio

Qasim Aziz Portfolio

@font-face : Prova .

Hello I’m Dan

Hello I'm Dan

@font-face : Trade .

Glorm

Glorm

@font-face : Agenda .

Hi! Sophia Riepe

Hi! Sophia Riepe

@font-face : Museo.

Agence Web

Agence Web

@font-face : MyriadPro,Futura.

adrianth.com

adrianth.com

@font-face : BebasNeue.

The Mischief Co.

The Mischief Co.

@font-face : DemingEP , Nova eorgia.

Crafted Pixelz

Crafted Pixelz

@font-face : Pakt .

CSSigniter

CSSigniter

@font-face : Proxima Nova.

Paddle Addict

Paddle Addict

@font-face : Poplar .

VUURR

VUURR

@font-face : CreightonPro.

The Camry Effect

The Camry Effect

@font-face : EngschriftDIND.

Rhinoslider: jQuery slider

Rhinoslider: jQuery slider

@font-face : QuicksandBook.

Digiti

Digiti

@font-face : Aller.

Graphic Culture

Graphic Culture

@font-face : Kulturista.

WoodCase

WoodCase

@font-face : isblack.

Selected Works of Joel Colombo

Selected Works of Joel Colombo

@font-face : Didot.

B&O PLAY

B&O PLAY

@font-face : GothamLight ,HeroLight,

Ray Macari – Digital Designer

Ray Macari - Digital Designer

@font-face : museo-slab, WebSymbols ,ModernPictogramsNormal , Palatino Linotype , Book Antiqua , Palatino.

squarefactor

squarefactor

@font-face : TitilliumText.

Showcase app

Showcase app

@font-face : HN.

Mihael Miklosic – Web design

Mihael Miklosic - Web design

@font-face : duke, alexandria.

Treasure Hunt’s

Treasure Hunt's

@font-face : ProximaNova- , Helmet, Freesans, Geneva.

WWF | Green Paper Guide

WWF | Green Paper Guide

@font-face : wwfreg, impact ,wwfreg.

Under the Psycamore

Under the Psycamore

@font-face : OstrichSans.

Kipling Brasil

Kipling Brasil

@font-face : ProximaNovaL ,Kipling.

Lash U Lashes

Lash U Lashes

@font-face : Continuum, Continuum, Optima.

Bones Brigade DJs

Bones Brigade DJs

@font-face : Lisa ,Guilder , atrament-web Lisa, neue , Guilder, .

Making Connections Everyday

Making Connections Everyday

@font-face : BPreplay.

TKS – t-shirts & happiness

TKS - t-shirts & happiness

@font-face : MyriadWebPro ,MyriadPro.

Claes Norin – Portfolio

Claes Norin - Portfolio

@font-face : NeueLTStd47LtCn.

Leap Online Limited

Leap Online Limited

@font-face : Steelfish.

Ramotion

Ramotion

@font-face : PT Serif.

ulkogan

ulkogan

@font-face : AkGrBe-.

DOMDESIGN

DOMDESIGN

@font-face : Old Standard TT ,bree.

Band Themer

Band Themer

@font-face : ProximaNova,NeueLTStd65 .

Launch Factory

Launch Factory

@font-face : LeagueGothic.

The Tweed band

The Tweed band

@font-face : Parangon110C.

iShu+

iShu+

@font-face : BauerBodniBT ,MyriadPro .

T. Scott International

T. Scott International

@font-face : GillSans.

Portent Internet Marketing

Portent  Internet Marketing

@font-face : Neue , LeagueGothic.

BlackMoon Design

BlackMoon Design

@font-face : OliJo.

Blueclaw Ecommerce

Blueclaw Ecommerce

@font-face : BebasNeue.

Giba

Giba

@font-face : BebasNeue.

Fuze.cc

Fuze.cc

@font-face : Rockwell ,

Fiart Mare

Fiart Mare

@font-face : BentonSans.

Helldesign

Helldesign

@font-face : GEInspira.

The Drumlet

The Drumlet

@font-face : DSDigital.

B&C Designers

B&C Designers

@font-face : RalewayThin ,TheanoDidot ,LeagueGothic.

Five Details

Five Details

@font-face : LFT Etica ,Chennai Oblique.

Code slingers Challenge

Code slingers Challenge

@font-face : DirtyHeadline.

20 Calendars

20 Calendars

@font-face : Bebas ,FrancoisOne .

Ralph Van Rentergem

Ralph Van Rentergem

@font-face : stencilbt-regular ,steelfis ,racewayjf.

Youandigraphics

Youandigraphics

@font-face : OstrichSans.

Justin Finley

Justin Finley

@font-face : LeagueGothic ,UniversLTStd39ThUltraCn .

5×5 Creative

5x5 Creative

@font-face : MetaMediumCyrLFRoman , Segoe UI , Candara, Bitstream Vera Sans , DejaVu Sans .

Jack Morris Digital

Jack Morris Digital

@font-face : TheanoDidot .

RESPONSIVE DESIGN TEMPLATE

RESPONSIVE DESIGN TEMPLATE

@font-face : Comfortaa.

ArtPilot Studio

ArtPilot Studio

@font-face : Podkova .

Circle Entertainment

Circle Entertainment

@font-face : DINProLight.

Pixil

Pixil

@font-face : Yanone.

CSAM

CSAM

@font-face : Yanone.

Developweb

Developweb

@font-face : Open Sans.

Besser Leben mit Lehm

Besser Leben mit Lehm

@font-face : LietzLindauHamburg .

Vetica

Vetica

@font-face : CallunaLight.

Werbeagentur KOPFNUSS

Werbeagentur KOPFNUSS

@font-face : PtSans, BitStream ,ChunkFive.

Peter Lloyd – Handsome Copy

Peter Lloyd - Handsome Copy

@font-face : Comfortaa.

5bnet

5bnet

@font-face : PFDinDisplay.

Fábio Andrezo

Fábio Andrezo

@font-face : Yanone.

Unfollow

Unfollow

@font-face : Futura ,Prozak.

Occupy North Pole

Occupy North Pole

@font-face : Gnuolane ,IslandofMisfitToys.

Mozilla Popcorn

Mozilla Popcorn

@font-face : Colaborate.

FISHEYEAGENCY

FISHEYEAGENCY

@font-face : Neue-Light.

Street Corner Symphony

Street Corner Symphony

@font-face : corbel, Charcoal .

Festival Mundo 2011

Festival Mundo 2011

@font-face : AlternateGothic2BT ,Narrow.

Tyreright

Tyreright

@font-face : OpenSans.

Im Obsessing Over

Im Obsessing Over

@font-face : DroidSerif.

What about?

What about?

@font-face : Tahoma.

Filament Creative

Filament Creative

@font-face : BreeLight ,TradeGothic .

Sunrise Celebration

Sunrise Celebration

@font-face : BEBAS.

TSE-WebDesign

TSE-WebDesign

@font-face : OvertheRainbow ,pastel.

Low Down Deep Recordings

Low Down Deep Recordings

@font-face : LowDownDeepFontRegularFont.

Jask Design Agency

Jask Design Agency

@font-face : DistrictThin , Lane .

workdiary.de / 2012

workdiary.de / 2012

@font-face : Proxima Nova , Helvetica Neue , DejaVu Serif.

Simon Guérin Portfolio

Simon Guérin Portfolio

@font-face : ProximaNovaLight , HelveticaLight , RBNo2LightAlternativeRegular , Bitstream Charter.

Letterpress, Liquor, & LPs

Letterpress, Liquor, & LPs

@font-face : TeXGyrePagella.

Fabio Minduim

Fabio Minduim

@font-face : ClumsyRegular , LietzLindauHamburgRegular , NillandRegular.

Small Studio

Small Studio

@font-face : Conv_bod72ob.

Hostel Split

Hostel Split

@font-face : AdLibBTWGL4-Regular , Cooper Black .

Shady Acres

Shady Acres

@font-face : VAGRoundedStdBold.

2OurDay

2OurDay

@font-face : BlackCond , BoldCond , BoldSemiCn ,SemiCn .

Run with Chrissie

Run with Chrissie

@font-face : AlphaEcho , Epiphany Hand.

Uwar: Real life mobile FPS

Uwar: Real life mobile FPS

@font-face : LeagueGothic.

Dylan Jones – Design Hero

Dylan Jones - Design Hero

@font-face : Futura.

Progression Studios Redesign

Progression Studios Redesign

@font-face : TTAnvers.

The Design Koop

The Design Koop

@font-face : GeoSlab703MdBTBold , Geometr706MdBTBlack .

Fragment

Fragment

@font-face : Din , Merriweather .

Twisted

Twisted

@font-face : Proxima.

Sparks Online

Sparks Online

@font-face : PTSansNarrowBold , Cabin.

Bruno Marinho – UI Designer

Bruno Marinho - UI Designer

@font-face : ChunkFiveRegular , TheoremRegular .

Binou

binou

@font-face : chunkfiveregular , lobster14regular .

We Run México 2011

We Run México 2011

@font-face : FuturaNDCnExtraBoldOblique , FuturaNDBook , FuturaNDCnExtraBold ,

Fall In Love 2012

Fall In Love 2012

@font-face : Century Gothic.