Fonts: what you have to know
Websafe fonts are basically fonts that most browsers and operating systems support, but it might well be that some people see your website different than you yourself see it.
Now: you can go install a font and link it to your site, but that means that it will take more time to render your site at the first visit (once the font is automatically downloaded, the slow-down effect is gone) and as nowadays more and more websites use several external tools and third-party apps / includes, that all together affects the performance. On average: if it takes more than three seconds to render your website, most visitors just leave , so that's one more reason to use a font that most browsers and operating systems support instead of having to load the font from your domain or from an external website.
By the way: this website uses the calibri-regular font, but there are hardly any other things that slow down the site, so it stays well within these three seconds and mostly only the users on android devices don't have this font installed.
So: it's a decision that you have to make: use only standard web-safe fonts or serve a hosted font? This depends on what you yourself want for your website based on several insights that you have in what your visitors use, Google analytics f.e. is a good tool to find out what operating systems and devices your visitors use, this website has about 35% of Android-users and they mostly browse more than one page, so not many seem to run away because of a slow website...The list below shows the fonts without and with font-type, no fallback-fonts are used so what you see is what you get. Ofcourse: it is wise to use fallback-fonts on your website, so add a couple more (with the same font-type), ending with that specific font-type, like:
.myselfnamedclass {font-family: alexa, 'Bradley Hand', 'Brush Script', Cursive}For your convenience I have made a second list sorted on font-type (and then alphabetically on font) so that you can find a suitable fall-back font (with the same font-type) quickly.
You can browse the list below and have a look at how the fonts are being rendered, best is to test the list on several browsers and several machines (desktop, tablet, phone etc.). A font that looks the same everywhere is more or less to be considered a websafe font.
check out the bottom for social stuff and more!
Not an advertisement, but looks like it
Fonts (alphabetically): ↑
Adobe GaramondAdobe Garamond:abc ABC 123 &?!Adobe Garamond, Serif:abc ABC 123 &?!AlexaAlexa:abc ABC 123 &?!Alexa, Cursive:abc ABC 123 &?!American TypewriterAmerican Typewriter:abc ABC 123 &?!American Typewriter, Serif:abc ABC 123 &?!Andale MonoAndale Mono:abc ABC 123 &?!Andale Mono, Monospace:abc ABC 123 &?!ArialArial:abc ABC 123 &?!Arial, Sans-Serif:abc ABC 123 &?!Arial BlackArial Black:abc ABC 123 &?!Arial Black, Sans-Serif:abc ABC 123 &?!Arial MT Condensed LightArial MT Condensed Light:abc ABC 123 &?!Arial MT Condensed Light, Sans-Serif:abc ABC 123 &?!Arial NarrowArial Narrow:abc ABC 123 &?!Arial Narrow, Sans-Serif:abc ABC 123 &?!BaskervilleBaskerville:abc ABC 123 &?!Baskerville, Serif:abc ABC 123 &?!BodoniBodoni:abc ABC 123 &?!Bodoni, Serif:abc ABC 123 &?!Bodoni MTBodoni MT:abc ABC 123 &?!Bodoni MT, Serif:abc ABC 123 &?!Bodoni PosterBodoni Poster :abc ABC 123 &?!Bodoni Poster , Serif:abc ABC 123 &?!Book AntiquaBook Antiqua:abc ABC 123 &?!Book Antiqua, Serif:abc ABC 123 &?!BookmanBookman:abc ABC 123 &?!Bookman, Serif:abc ABC 123 &?!Bookman old styleBookman old style:abc ABC 123 &?!Bookman old style, Serif:abc ABC 123 &?!Bradley HandBradley Hand:abc ABC 123 &?!Bradley Hand, Cursive:abc ABC 123 &?!Brush ScriptBrush Script:abc ABC 123 &?!Brush Script, Cursive:abc ABC 123 &?!Brush Script MSBrush Script MS:abc ABC 123 &?!Brush Script MS, Cursive:abc ABC 123 &?!Brush Script MTBrush Script MT:abc ABC 123 &?!Brush Script MT, Cursive:abc ABC 123 &?!CalibriCalibri:abc ABC 123 &?!Calibri, Sans-Serif:abc ABC 123 &?!Calisto MTCalisto MT:abc ABC 123 &?!Calisto MT, Serif:abc ABC 123 &?!CambriaCambria:abc ABC 123 &?!Cambria, Serif:abc ABC 123 &?!CandaraCandara:abc ABC 123 &?!Candara, Sans-Serif:abc ABC 123 &?!Century GothicCentury Gothic :abc ABC 123 &?!Century Gothic , Sans-Serif:abc ABC 123 &?!ChalkboardChalkboard:abc ABC 123 &?!Chalkboard, Cursive:abc ABC 123 &?!CharcoalCharcoal:abc ABC 123 &?!Charcoal, Sans-Serif:abc ABC 123 &?!Comic Sans MSComic Sans MS:abc ABC 123 &?!Comic Sans MS, Cursive:abc ABC 123 &?!ConsolasConsolas:abc ABC 123 &?!Consolas, Monospace:abc ABC 123 &?!ConstantiaConstantia:abc ABC 123 &?!Constantia, Serif:abc ABC 123 &?!CopperplateCopperplate :abc ABC 123 &?!Copperplate , Sans-Serif:abc ABC 123 &?!Copperplate GothicCopperplate Gothic:abc ABC 123 &?!Copperplate Gothic, Sans-Serif:abc ABC 123 &?!CorbelCorbel:abc ABC 123 &?!Corbel, Sans-Serif:abc ABC 123 &?!CormorantCormorant:abc ABC 123 &?!Cormorant, Serif:abc ABC 123 &?!CourierCourier:abc ABC 123 &?!Courier, Monospace:abc ABC 123 &?!Courier NewCourier New:abc ABC 123 &?!Courier New, Monospace:abc ABC 123 &?!DejaVu SansDejaVu Sans:abc ABC 123 &?!DejaVu Sans, Sans-Serif:abc ABC 123 &?!DidotDidot:abc ABC 123 &?!Didot, Serif:abc ABC 123 &?!EB GaramondEB Garamond :abc ABC 123 &?!EB Garamond , Serif:abc ABC 123 &?!Franklin GothicFranklin Gothic:abc ABC 123 &?!Franklin Gothic, Sans-Serif:abc ABC 123 &?!Franklin Gothic MediumFranklin Gothic Medium:abc ABC 123 &?!Franklin Gothic Medium, Sans-Serif:abc ABC 123 &?!French Script MTFrench Script MT:abc ABC 123 &?!French Script MT, Cursive:abc ABC 123 &?!FuturaFutura:abc ABC 123 &?!Futura, Sans-Serif:abc ABC 123 &?!GaramondGaramond:abc ABC 123 &?!Garamond, Serif:abc ABC 123 &?!GenevaGeneva:abc ABC 123 &?!Geneva, Sans-Serif:abc ABC 123 &?!GeorgiaGeorgia:abc ABC 123 &?!Georgia, Serif:abc ABC 123 &?!Gill SansGill Sans:abc ABC 123 &?!Gill Sans, Sans-Serif:abc ABC 123 &?!Goudy Old StyleGoudy Old Style:abc ABC 123 &?!Goudy Old Style, Serif:abc ABC 123 &?!HaettenschweilerHaettenschweiler:abc ABC 123 &?!Haettenschweiler, Sans-Serif:abc ABC 123 &?!HelveticaHelvetica:abc ABC 123 &?!Helvetica, Sans-Serif:abc ABC 123 &?!ImpactImpact:abc ABC 123 &?!Impact, Sans-Serif:abc ABC 123 &?!LatoLato:abc ABC 123 &?!Lato, Sans-Serif:abc ABC 123 &?!Libre BaskervilleLibre Baskerville:abc ABC 123 &?!Libre Baskerville, Serif:abc ABC 123 &?!Linotype DidotLinotype Didot:abc ABC 123 &?!Linotype Didot, Serif:abc ABC 123 &?!LucidaLucida:abc ABC 123 &?!Lucida, Monospace:abc ABC 123 &?!Lucida BrightLucida Bright:abc ABC 123 &?!Lucida Bright, Monospace:abc ABC 123 &?!Lucida ConsoleLucida Console:abc ABC 123 &?!Lucida Console, Monospace:abc ABC 123 &?!Lucida GrandeLucida Grande:abc ABC 123 &?!Lucida Grande, Monospace:abc ABC 123 &?!Lucida HandwritingLucida Handwriting:abc ABC 123 &?!Lucida Handwriting, Monospace:abc ABC 123 &?!Lucida SansLucida Sans:abc ABC 123 &?!Lucida Sans, Monospace:abc ABC 123 &?!Lucida Sans UnicodeLucida Sans Unicode:abc ABC 123 &?!Lucida Sans Unicode, Sans-Serif:abc ABC 123 &?!LuminariLuminari:abc ABC 123 &?!Luminari, Fantasy:abc ABC 123 &?!MonacoMonaco:abc ABC 123 &?!Monaco, Monospace:abc ABC 123 &?!MS Sans SerifMS Sans Serif:abc ABC 123 &?!MS Sans Serif, Sans-Serif:abc ABC 123 &?!Helvetica NeueHelvetica Neue:abc ABC 123 &?!Helvetica Neue, Sans-Serif:abc ABC 123 &?!New YorkNew York:abc ABC 123 &?!New York, Serif:abc ABC 123 &?!Open SansOpen Sans:abc ABC 123 &?!Open Sans, Sans-Serif:abc ABC 123 &?!OptimaOptima:abc ABC 123 &?!Optima, Sans-Serif:abc ABC 123 &?!PalatinoPalatino:abc ABC 123 &?!Palatino, Serif:abc ABC 123 &?!Palatino LinotypePalatino Linotype:abc ABC 123 &?!Palatino Linotype, Serif:abc ABC 123 &?!PapyrusPapyrus:abc ABC 123 &?!Papyrus, Fantasy:abc ABC 123 &?!PerpetuaPerpetua:abc ABC 123 &?!Perpetua, Serif:abc ABC 123 &?!PlaybillPlaybill:abc ABC 123 &?!Playbill, Serif:abc ABC 123 &?!RageRage:abc ABC 123 &?!Rage, Sans-Serif:abc ABC 123 &?!RockwellRockwell:abc ABC 123 &?!Rockwell, Serif:abc ABC 123 &?!Script MTScript MT:abc ABC 123 &?!Script MT, Cursive:abc ABC 123 &?!Segoe PrintSegoe Print:abc ABC 123 &?!Segoe Print, Sans-Serif:abc ABC 123 &?!Segoe scriptSegoe script:abc ABC 123 &?!Segoe script, Sans-Serif:abc ABC 123 &?!Segoe UISegoe UI:abc ABC 123 &?!Segoe UI, Sans-Serif:abc ABC 123 &?!Snell RoundhandSnell Roundhand:abc ABC 123 &?!Snell Roundhand, Cursive:abc ABC 123 &?!SylfaenSylfaen:abc ABC 123 &?!Sylfaen, Serif:abc ABC 123 &?!SymbolSymbol:abc ABC 123 &?!Symbol, Serif:abc ABC 123 &?!TahomaTahoma:abc ABC 123 &?!Tahoma, Sans-Serif:abc ABC 123 &?!TerminalTerminal:abc ABC 123 &?!Terminal, Monospace:abc ABC 123 &?!ThasadithThasadith:abc ABC 123 &?!Thasadith, Sans-Serif:abc ABC 123 &?!TimesTimes:abc ABC 123 &?!Times, Serif:abc ABC 123 &?!Times New RomanTimes New Roman:abc ABC 123 &?!Times New Roman, Serif:abc ABC 123 &?!TrattatelloTrattatello :abc ABC 123 &?!Trattatello , Sans-Serif:abc ABC 123 &?!Trebuchet MSTrebuchet MS:abc ABC 123 &?!Trebuchet MS, Sans-Serif:abc ABC 123 &?!VerdanaVerdana:abc ABC 123 &?!Verdana, Sans-Serif:abc ABC 123 &?!Zapf DingbatsZapf Dingbats:abc ABC 123 &?!Zapf Dingbats, Fantasy:abc ABC 123 &?!
Fonts (alphabetically on font-type): ↑
Adobe GaramondAdobe Garamond:abc ABC 123 &?!Adobe Garamond, Serif:abc ABC 123 &?!American TypewriterAmerican Typewriter:abc ABC 123 &?!American Typewriter, Serif:abc ABC 123 &?!BaskervilleBaskerville:abc ABC 123 &?!Baskerville, Serif:abc ABC 123 &?!BodoniBodoni:abc ABC 123 &?!Bodoni, Serif:abc ABC 123 &?!Bodoni MTBodoni MT:abc ABC 123 &?!Bodoni MT, Serif:abc ABC 123 &?!Bodoni PosterBodoni Poster :abc ABC 123 &?!Bodoni Poster , Serif:abc ABC 123 &?!Book AntiquaBook Antiqua:abc ABC 123 &?!Book Antiqua, Serif:abc ABC 123 &?!BookmanBookman:abc ABC 123 &?!Bookman, Serif:abc ABC 123 &?!Bookman old styleBookman old style:abc ABC 123 &?!Bookman old style, Serif:abc ABC 123 &?!Calisto MTCalisto MT:abc ABC 123 &?!Calisto MT, Serif:abc ABC 123 &?!CambriaCambria:abc ABC 123 &?!Cambria, Serif:abc ABC 123 &?!ConstantiaConstantia:abc ABC 123 &?!Constantia, Serif:abc ABC 123 &?!CormorantCormorant:abc ABC 123 &?!Cormorant, Serif:abc ABC 123 &?!DidotDidot:abc ABC 123 &?!Didot, Serif:abc ABC 123 &?!EB GaramondEB Garamond :abc ABC 123 &?!EB Garamond , Serif:abc ABC 123 &?!GaramondGaramond:abc ABC 123 &?!Garamond, Serif:abc ABC 123 &?!GeorgiaGeorgia:abc ABC 123 &?!Georgia, Serif:abc ABC 123 &?!Goudy Old StyleGoudy Old Style:abc ABC 123 &?!Goudy Old Style, Serif:abc ABC 123 &?!Libre BaskervilleLibre Baskerville:abc ABC 123 &?!Libre Baskerville, Serif:abc ABC 123 &?!Linotype DidotLinotype Didot:abc ABC 123 &?!Linotype Didot, Serif:abc ABC 123 &?!New YorkNew York:abc ABC 123 &?!New York, Serif:abc ABC 123 &?!PalatinoPalatino:abc ABC 123 &?!Palatino, Serif:abc ABC 123 &?!Palatino LinotypePalatino Linotype:abc ABC 123 &?!Palatino Linotype, Serif:abc ABC 123 &?!PerpetuaPerpetua:abc ABC 123 &?!Perpetua, Serif:abc ABC 123 &?!PlaybillPlaybill:abc ABC 123 &?!Playbill, Serif:abc ABC 123 &?!RockwellRockwell:abc ABC 123 &?!Rockwell, Serif:abc ABC 123 &?!SylfaenSylfaen:abc ABC 123 &?!Sylfaen, Serif:abc ABC 123 &?!SymbolSymbol:abc ABC 123 &?!Symbol, Serif:abc ABC 123 &?!TimesTimes:abc ABC 123 &?!Times, Serif:abc ABC 123 &?!Times New RomanTimes New Roman:abc ABC 123 &?!Times New Roman, Serif:abc ABC 123 &?!ArialArial:abc ABC 123 &?!Arial, Sans-Serif:abc ABC 123 &?!Arial BlackArial Black:abc ABC 123 &?!Arial Black, Sans-Serif:abc ABC 123 &?!Arial MT Condensed LightArial MT Condensed Light:abc ABC 123 &?!Arial MT Condensed Light, Sans-Serif:abc ABC 123 &?!Arial NarrowArial Narrow:abc ABC 123 &?!Arial Narrow, Sans-Serif:abc ABC 123 &?!CalibriCalibri:abc ABC 123 &?!Calibri, Sans-Serif:abc ABC 123 &?!CandaraCandara:abc ABC 123 &?!Candara, Sans-Serif:abc ABC 123 &?!Century GothicCentury Gothic :abc ABC 123 &?!Century Gothic , Sans-Serif:abc ABC 123 &?!CharcoalCharcoal:abc ABC 123 &?!Charcoal, Sans-Serif:abc ABC 123 &?!CopperplateCopperplate :abc ABC 123 &?!Copperplate , Sans-Serif:abc ABC 123 &?!Copperplate GothicCopperplate Gothic:abc ABC 123 &?!Copperplate Gothic, Sans-Serif:abc ABC 123 &?!CorbelCorbel:abc ABC 123 &?!Corbel, Sans-Serif:abc ABC 123 &?!DejaVu SansDejaVu Sans:abc ABC 123 &?!DejaVu Sans, Sans-Serif:abc ABC 123 &?!Franklin GothicFranklin Gothic:abc ABC 123 &?!Franklin Gothic, Sans-Serif:abc ABC 123 &?!Franklin Gothic MediumFranklin Gothic Medium:abc ABC 123 &?!Franklin Gothic Medium, Sans-Serif:abc ABC 123 &?!FuturaFutura:abc ABC 123 &?!Futura, Sans-Serif:abc ABC 123 &?!GenevaGeneva:abc ABC 123 &?!Geneva, Sans-Serif:abc ABC 123 &?!Gill SansGill Sans:abc ABC 123 &?!Gill Sans, Sans-Serif:abc ABC 123 &?!HaettenschweilerHaettenschweiler:abc ABC 123 &?!Haettenschweiler, Sans-Serif:abc ABC 123 &?!HelveticaHelvetica:abc ABC 123 &?!Helvetica, Sans-Serif:abc ABC 123 &?!Helvetica NeueHelvetica Neue:abc ABC 123 &?!Helvetica Neue, Sans-Serif:abc ABC 123 &?!ImpactImpact:abc ABC 123 &?!Impact, Fantasy:abc ABC 123 &?!LatoLato:abc ABC 123 &?!Lato, Sans-Serif:abc ABC 123 &?!Lucida Sans UnicodeLucida Sans Unicode:abc ABC 123 &?!Lucida Sans Unicode, Sans-Serif:abc ABC 123 &?!MS Sans SerifMS Sans Serif:abc ABC 123 &?!MS Sans Serif, Sans-Serif:abc ABC 123 &?!Open SansOpen Sans:abc ABC 123 &?!Open Sans, Sans-Serif:abc ABC 123 &?!OptimaOptima:abc ABC 123 &?!Optima, Sans-Serif:abc ABC 123 &?!RageRage:abc ABC 123 &?!Rage, Sans-Serif:abc ABC 123 &?!Segoe PrintSegoe Print:abc ABC 123 &?!Segoe Print, Sans-Serif:abc ABC 123 &?!Segoe scriptSegoe script:abc ABC 123 &?!Segoe script, Sans-Serif:abc ABC 123 &?!Segoe UISegoe UI:abc ABC 123 &?!Segoe UI, Sans-Serif:abc ABC 123 &?!TahomaTahoma:abc ABC 123 &?!Tahoma, Sans-Serif:abc ABC 123 &?!ThasadithThasadith:abc ABC 123 &?!Thasadith, Sans-Serif:abc ABC 123 &?!TrattatelloTrattatello :abc ABC 123 &?!Trattatello , Sans-Serif:abc ABC 123 &?!Trebuchet MSTrebuchet MS:abc ABC 123 &?!Trebuchet MS, Sans-Serif:abc ABC 123 &?!VerdanaVerdana:abc ABC 123 &?!Verdana, Sans-Serif:abc ABC 123 &?!Andale MonoAndale Mono:abc ABC 123 &?!Andale Mono, Monospace:abc ABC 123 &?!ConsolasConsolas:abc ABC 123 &?!Consolas, Monospace:abc ABC 123 &?!CourierCourier:abc ABC 123 &?!Courier, Monospace:abc ABC 123 &?!Courier NewCourier New:abc ABC 123 &?!Courier New, Monospace:abc ABC 123 &?!LucidaLucida:abc ABC 123 &?!Lucida, Monospace:abc ABC 123 &?!Lucida BrightLucida Bright:abc ABC 123 &?!Lucida Bright, Monospace:abc ABC 123 &?!Lucida ConsoleLucida Console:abc ABC 123 &?!Lucida Console, Monospace:abc ABC 123 &?!Lucida GrandeLucida Grande:abc ABC 123 &?!Lucida Grande, Monospace:abc ABC 123 &?!Lucida HandwritingLucida Handwriting:abc ABC 123 &?!Lucida Handwriting, Monospace:abc ABC 123 &?!Lucida SansLucida Sans:abc ABC 123 &?!Lucida Sans, Monospace:abc ABC 123 &?!MonacoMonaco:abc ABC 123 &?!Monaco, Monospace:abc ABC 123 &?!TerminalTerminal:abc ABC 123 &?!Terminal, Monospace:abc ABC 123 &?!LuminariLuminari:abc ABC 123 &?!Luminari, Fantasy:abc ABC 123 &?!PapyrusPapyrus:abc ABC 123 &?!Papyrus, Fantasy:abc ABC 123 &?!Zapf DingbatsZapf Dingbats:abc ABC 123 &?!Zapf Dingbats, Fantasy:abc ABC 123 &?!AlexaAlexa:abc ABC 123 &?!Alexa, Cursive:abc ABC 123 &?!Bradley HandBradley Hand:abc ABC 123 &?!Bradley Hand, Cursive:abc ABC 123 &?!Brush ScriptBrush Script:abc ABC 123 &?!Brush Script, Cursive:abc ABC 123 &?!Brush Script MSBrush Script MS:abc ABC 123 &?!Brush Script MS, Cursive:abc ABC 123 &?!Brush Script MTBrush Script MT:abc ABC 123 &?!Brush Script MT, Cursive:abc ABC 123 &?!ChalkboardChalkboard:abc ABC 123 &?!Chalkboard, Cursive:abc ABC 123 &?!Comic Sans MSComic Sans MS:abc ABC 123 &?!Comic Sans MS, Cursive:abc ABC 123 &?!French Script MTFrench Script MT:abc ABC 123 &?!French Script MT, Cursive:abc ABC 123 &?!Script MTScript MT:abc ABC 123 &?!Script MT, Cursive:abc ABC 123 &?!Snell RoundhandSnell Roundhand:abc ABC 123 &?!Snell Roundhand, Cursive:abc ABC 123 &?!