{"id":40781,"date":"2014-05-17T15:14:11","date_gmt":"2014-05-17T09:44:11","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?page_id=40781"},"modified":"2023-06-18T17:01:42","modified_gmt":"2023-06-18T11:31:42","slug":"web-safe-fonts-list","status":"publish","type":"page","link":"https:\/\/www.quickonlinetips.com\/archives\/web-safe-fonts-list\/","title":{"rendered":"10 Best Web Safe Fonts List"},"content":{"rendered":"<p>Web safe fonts are the best way to get a fast site as they load instantly across browser platforms. While custom web CSS fonts like Google fonts are getting popular, they do take time to load and can lead to a blank website look, while the font loads.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-44201\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/safe-fonts.jpg\" alt=\"web safe fonts\" width=\"640\" height=\"262\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/safe-fonts.jpg 640w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/safe-fonts-150x61.jpg 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/safe-fonts-300x123.jpg 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Though there are many claimants of web-safe fonts (like <a href=\"https:\/\/www.quickonlinetips.com\/projects\/web-safe-colors\/\">web safe colors<\/a>), these are the fonts that will work across all platforms &#8211; Windows, Mac OSX, and Unix. Most lists will need to include several backup fonts, but these fonts do not need backups. They are all free fonts.<\/p>\n<p>To add an Arial font to CSS, simply use this<br \/>\n<code>font-family: arial;<\/code><\/p>\n<p>Here is the list of web-safe fonts which are the best to use in your site design for reliable performance and quick loading site design. They have been displayed in normal, bold and italics format for better visualization.<\/p>\n<h2>Web Safe Sans Serif Fonts<\/h2>\n<p>The following fonts are web-safe fonts in sans serif style<\/p>\n<ul>\n<li>Arial<\/li>\n<li>Helvetica<\/li>\n<li>Verdana<\/li>\n<li>Tahoma<\/li>\n<li>Arial Black<\/li>\n<li>Trebuchet MS<\/li>\n<\/ul>\n<p>See the styles below as they would look on a webpage.<\/p>\n<div class=\"alert alert-info box\">\n<h3><span style=\"font-family: Arial;\">Arial Heading<\/span><\/h3>\n<p><span style=\"font-family: arial; font-size: 1.2em;\">Arial<\/span><br \/>\n<span style=\"font-family: arial; font-weight: bold; font-size: 1.2em;\">Arial Bold<\/span><br \/>\n<span style=\"font-family: arial; font-style: italic; font-size: 1.2em;\">Arial italics<\/span><\/p>\n<\/div>\n<div class=\"alert alert-info box\">\n<h3><span style=\"font-family: Helvetica;\">Helvetica Heading<\/span><\/h3>\n<p><span style=\"font-family: Helvetica; font-size: 1.2em;\">Helvetica <\/span><br \/>\n<span style=\"font-family: Helvetica; font-weight: bold; font-size: 1.2em;\">Helvetica Bold<\/span><br \/>\n<span style=\"font-family: Helvetica; font-style: italic; font-size: 1.2em;\">Helvetica Italics<\/span><\/p>\n<\/div>\n<div class=\"alert alert-info box\">\n<h3><span style=\"font-family: Verdana;\">Verdana Heading<\/span><\/h3>\n<p><span style=\"font-family: Verdana; font-size: 1.2em;\">Verdana<\/span><br \/>\n<span style=\"font-family: Verdana; font-weight: bold; font-size: 1.2em;\">Verdana Bold<\/span><br \/>\n<span style=\"font-family: Verdana; font-style: italic; font-size: 1.2em;\">Verdana Italics<\/span><\/p>\n<\/div>\n<div class=\"alert alert-info box\">\n<h3><span style=\"font-family: Tahoma;\">Tahoma Heading<\/span><\/h3>\n<p><span style=\"font-family: Tahoma; font-size: 1.2em;\">Tahoma<\/span><br \/>\n<span style=\"font-family: Tahoma; font-weight: bold; font-size: 1.2em;\">Tahoma Bold<\/span><br \/>\n<span style=\"font-family: Tahoma; font-style: italic; font-size: 1.2em;\">Tahoma Italics<\/span><\/p>\n<\/div>\n<div class=\"alert alert-info box\">\n<h3><span style=\"font-family: 'Arial Black';\">Arial Black Heading<\/span><\/h3>\n<p><span style=\"font-family: 'Arial Black'; font-size: 1.2em;\">Arial Black<\/span><br \/>\n<span style=\"font-family: 'Arial Black'; font-weight: bold; font-size: 1.2em;\">Arial Black Bold<\/span><br \/>\n<span style=\"font-family: 'Arial Black'; font-style: italic; font-size: 1.2em;\">Arial Black Italics<\/span><\/p>\n<\/div>\n<div class=\"alert alert-info box\">\n<h3><span style=\"font-family: 'Trebuchet MS';\">Trebuchet MS Heading<\/span><\/h3>\n<p><span style=\"font-family: 'Trebuchet MS'; font-size: 1.2em;\">Trebuchet MS<\/span><br \/>\n<span style=\"font-family: 'Trebuchet MS'; font-weight: bold; font-size: 1.2em;\">Trebuchet MS Bold<\/span><br \/>\n<span style=\"font-family: 'Trebuchet MS'; font-style: italic; font-size: 1.2em;\">Trebuchet MS Italics<\/span><\/p>\n<\/div>\n<h2>Web Safe Serif Fonts<\/h2>\n<p>The following fonts are web safe fonts in serif style<\/p>\n<ul>\n<li>Georgia<\/li>\n<li>Times New Roman<\/li>\n<\/ul>\n<p>See the styles below as they would look on a webpage.<\/p>\n<div class=\"alert alert-warning box\">\n<h3><span style=\"font-family: Georgia;\">Georgia Heading<\/span><\/h3>\n<p><span style=\"font-family: Georgia; font-size: 1.2em;\">Georgia<\/span><br \/>\n<span style=\"font-family: Georgia; font-weight: bold; font-size: 1.2em;\">Georgia Bold<\/span><br \/>\n<span style=\"font-family: Georgia; font-style: italic; font-size: 1.2em;\">Georgia Italics<\/span><\/p>\n<\/div>\n<div class=\"alert alert-warning box\">\n<h3><span style=\"font-family: 'Times New Roman';\">Times New Roman Heading<\/span><\/h3>\n<p><span style=\"font-family: 'Times New Roman'; font-size: 1.2em;\">Times New Roman<\/span><br \/>\n<span style=\"font-family: 'Times New Roman'; font-weight: bold; font-size: 1.2em;\">Times New Roman Bold<\/span><br \/>\n<span style=\"font-family: 'Times New Roman'; font-style: italic; font-size: 1.2em;\">Times New Roman Italics<\/span><\/p>\n<\/div>\n<h2>Web Safe Monospace Fonts<\/h2>\n<div class=\"alert alert-success box\">\n<h3><span style=\"font-family: 'Courier New';\">Courier New Heading<\/span><\/h3>\n<p><span style=\"font-family: 'Courier New'; font-size: 1.2em;\">Courier New<\/span><br \/>\n<span style=\"font-family: 'Courier New'; font-weight: bold; font-size: 1.2em;\">Courier New Bold<\/span><br \/>\n<span style=\"font-family: 'Courier New'; font-style: italic; font-size: 1.2em;\">Courier New Italics<\/span><\/p>\n<\/div>\n<h2>Web Safe Cursive Fonts<\/h2>\n<div class=\"alert alert-danger box\">\n<h3><span style=\"font-family: 'Comic Sans MS';\">Comic Sans MS Heading<\/span><\/h3>\n<p><span style=\"font-family: 'Comic Sans MS'; font-size: 1.2em;\">Comic Sans MS<\/span><br \/>\n<span style=\"font-family: 'Comic Sans MS'; font-weight: bold; font-size: 1.2em;\">Comic Sans MS Bold<\/span><br \/>\n<span style=\"font-family: 'Comic Sans MS'; font-style: italic; font-size: 1.2em;\">Comic Sans MS Italics<\/span><\/p>\n<\/div>\n<p><a class=\"btn btn-block btn-lg btn-success text-decoration-none shadow\" href=\"https:\/\/www.quickonlinetips.com\/projects\/\">View all Projects<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web safe fonts are the best way to get a fast site as they load instantly across browser platforms. While custom web CSS fonts like Google fonts are getting popular, they do take time to load and can lead to a blank website look, while the font loads. Though there are many claimants of web-safe&#8230;<\/p>\n","protected":false},"author":4,"featured_media":44201,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-40781","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/40781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=40781"}],"version-history":[{"count":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/40781\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/44201"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=40781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}