We have gathered together a nice resource list of stunning web safe fonts that you can use with CSS. “Web Safe” fonts mean that they will look perfect no matter the browser you are viewing them from. Also, these fonts are very popular and are most likely to be pre-installed on your operating system, be it Windows, iOS or even Linux.
Along with each web safe font in this list is a preview image of what it looks like, and the raw CSS code that you can copy and paste directly into your own stylesheet to use the font. These typefaces have remarkable designs and will look great in your projects.
Moreover, these examples include the CSS code which makes them easy to be integrated into your website.
So, here you have 30 web safe fonts to use with CSS. Do you know other web safe fonts? Let us know in the comment section below.
Abel Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/1UcBsgb' rel='stylesheet'>
<style>
body {
font-family: 'Abel';font-size: 22px;
}
</style>
</head>
<body>
<h1>Abel</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Aclonica Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2volhri' rel='stylesheet'>
<style>
body {
font-family: 'Aclonica';font-size: 22px;
}
</style>
</head>
<body>
<h1>Aclonica</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Actor Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2vnWMuo' rel='stylesheet'>
<style>
body {
font-family: 'Actor';font-size: 22px;
}
</style>
</head>
<body>
<h1>Actor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Advent Pro Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2uECdu0 Pro' rel='stylesheet'>
<style>
body {
font-family: 'Advent Pro';font-size: 22px;
}
</style>
</head>
<body>
<h1>Advent Pro</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Alegreya Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2volj2o' rel='stylesheet'>
<style>
body {
font-family: 'Alegreya';font-size: 22px;
}
</style>
</head>
<body>
<h1>Alegreya</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Alegreya Sans SC Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2volj2o Sans SC' rel='stylesheet'>
<style>
body {
font-family: 'Alegreya Sans SC';font-size: 22px;
}
</style>
</head>
<body>
<h1>Alegreya Sans SC</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Allan Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2uUUSBR' rel='stylesheet'>
<style>
body {
font-family: 'Allan';font-size: 22px;
}
</style>
</head>
<body>
<h1>Allan</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Allerta Stencil Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2uUi3fN Stencil' rel='stylesheet'>
<style>
body {
font-family: 'Allerta Stencil';font-size: 22px;
}
</style>
</head>
<body>
<h1>Allerta Stencil</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Dekko Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2upunqC' rel='stylesheet'>
<style>
body {
font-family: 'Dekko';font-size: 22px;
}
</style>
</head>
<body>
<h1>Dekko</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Didact Gothic Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/1UM0q83 Gothic' rel='stylesheet'>
<style>
body {
font-family: 'Didact Gothic';font-size: 22px;
}
</style>
</head>
<body>
<h1>Didact Gothic</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Gruppo Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2upoSYK' rel='stylesheet'>
<style>
body {
font-family: 'Gruppo';font-size: 22px;
}
</style>
</head>
<body>
<h1>Gruppo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Kalam Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2eJfIeb' rel='stylesheet'>
<style>
body {
font-family: 'Kalam';font-size: 22px;
}
</style>
</head>
<body>
<h1>Kalam</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Merienda Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2upqp1a' rel='stylesheet'>
<style>
body {
font-family: 'Merienda';font-size: 22px;
}
</style>
</head>
<body>
<h1>Merienda</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Nova Flat Font
<!DOCTYPE html>
<html>
<head>
<link href='http://ift.tt/2upEawL Flat' rel='stylesheet'>
<style>
body {
font-family: 'Nova Flat';font-size: 22px;
}
</style>
</head>
<body>
<h1>Nova Flat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
* * * * *
Impact Font
[css].classname {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
}[/css]
* * * * *
Palatino Linotype Font
[css].classname {
color: #333333;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}[/css]
* * * * *
Tahoma Font
[css].classname {
color: #333333;
font-family: Tahoma, Geneva, sans-serif;
}[/css]
* * * * *
Century Gothic Font
[css].classname {
color: #333333;
font-family: Century Gothic, sans-serif;
}[/css]
* * * * *
Lucida Sans Unicode Font
[css].classname {
color: #333333;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}[/css]
* * * * *
Arial Black Font
[css].classname {
color: #333333;
font-family: 'Arial Black', Gadget, sans-serif;
}[/css]
* * * * *
Times New Roman Font
[css].classname {
color: #333333;
font-family: 'Times New Roman', Times, serif;
}[/css]
* * * * *
Arial Narrow Font
[css].classname {
color: #333333;
font-family: 'Arial Narrow', sans-serif;
}[/css]
* * * * *
Verdana Font
[css].classname {
color: #333333;
font-family: Verdana, Geneva, sans-serif;
}[/css]
* * * * *
Copperplate Gothic Light Font
[css].classname {
color: #333333;
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
}[/css]
* * * * *
Lucida Console Font
[css].classname {
color: #333333;
font-family: 'Lucida Console', Monaco, monospace;
}[/css]
* * * * *
Gill Sans – as much as I WISH this was web safe, it is not!
[css].classname {
color: #333333;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}[/css]
* * * * *
Trebuchet MS Font
[css].classname {
color: #333333;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}[/css]
* * * * *
Courier New Font
[css].classname {
color: #333333;
font-family: 'Courier New', Courier, monospace;
}[/css]
* * * * *
Arial Font
[css].classname {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}[/css]
* * * * *
Georgia Font
[css].classname {
color: #333333;
font-family: Georgia, Serif;
}[/css]
* * * * *
The post 30 Gorgeous Web Safe Fonts To Use With CSS appeared first on Web Design Blog | Magazine for Designers.
via http://ift.tt/1TqvmMe
No comments:
Post a Comment