Serif Fonts
font-family | Example text |
---|---|
Georgia, serif |
This is a headingThis is a paragraph |
"Palatino Linotype", "Book Antiqua", Palatino, serif |
This is a headingThis is a paragraph |
"Times New Roman", Times, serif |
This is a headingThis is a paragraph |
Sans-Serif Fonts
font-family | Example text |
---|---|
Arial, Helvetica, sans-serif |
This is a headingThis is a paragraph |
"Arial Black", Gadget, sans-serif |
This is a headingThis is a paragraph |
"Comic Sans MS", cursive, sans-serif |
This is a headingThis is a paragraph |
Impact, Charcoal, sans-serif |
This is a headingThis is a paragraph |
"Lucida Sans Unicode", "Lucida Grande", sans-serif |
This is a headingThis is a paragraph |
Tahoma, Geneva, sans-serif |
This is a headingThis is a paragraph |
"Trebuchet MS", Helvetica, sans-serif |
This is a headingThis is a paragraph |
Verdana, Geneva, sans-serif |
This is a headingThis is a paragraph |
Monospace Fonts
font-family | Example text |
---|---|
"Courier New", Courier, monospace |
This is a headingThis is a paragraph |
"Lucida Console", Monaco, monospace |
This is a headingThis is a paragraph |
Complete Code For Creating Web Safe Font In CSS
<!DOCTYPE html> <html> <head> <title>What Are The Web Safe Font Combinations Used In CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <style> body { background-color: #ecc6d9; } p.a { font-family: "Lucida Console", Monaco, monospace; } p.b { font-family: Arial, Helvetica, sans-serif; } </style> <body> <br/><br/> <div class="container"> <br> <div class="text-center"> <h1 id="color" style="color: black;">Web Safe Font Combinations Used In CSS</h1> </div> <br> <div class="well"> <p class="a">This is a paragraph, shown in the Lucida Console font.</p> <p class="b">This is a paragraph, shown in the Arial font.</p> </div> </div> </body> </html>