CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>CSS Font Stack: Nova Flat Web Font</title> <meta name="description" content="Web safe CSS font stacks and web fonts. Select, preview, and generate CSS and HTML for your font family."> <meta name="keywords" content="css font stack, css font, font stack, css stack, web safe font, web font, html fonts, font family,Nova Flat, css font selector, font preview, font help"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <link rel="shortcut icon" href="//dpidudyah7i0b.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="icon" href="//dpidudyah7i0b.cloudfront.net/favicon.ico" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-site-verification" content="ZkllBXM0YaGbvtbUBWPeMrRH7sJOHSKErKPJ_bQA9zM" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="/bootsnipp-layout/bootsnipp.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script async src="//netdna.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  <script> window.onload = function() { setTimeout(function() { var ad = document.querySelector("ins.adsbygoogle[data-ad-slot='5700240528']"); var promos = document.querySelectorAll(".g8byu8"); for (var i = 0; i < promos.length; i++) { var promo = promos[i]; if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) { // ad.style.cssText = 'display:block !important'; ad.parentElement.style.cssText = 'display:none !important'; promo.innerHTML = '<center>\ <div class="g8byu82" style="background-color:#FCFCFC;width: 728px;height:90px;padding:10px;border:1px solid #cccccc;text-align:left;">\ <h4 style="margin-top:0px;margin-bottom:2px">\ <i class="fa fa-list-alt"></i> <a href="http://bootsnipp.com/">CSS/JS/HTML Playground</a></h4>\ An HTML, CSS, Javascript playground to test and share code snippets.\ </div>\ </center>'; promo.style.maxWidth= ''; } else if (promo) { promo.innerHTML = '<center>\ <div class="g8byu82" style="background-color:#FCFCFC;width: 728px;height:90px;padding:10px;border:1px solid #cccccc;text-align:left;">\ <h5 style="margin-top:0px;margin-bottom:2px">\ <i class="fa fa-list-alt glyphicon glyphicon-list-alt"></i> <a href="http://bootsnipp.com/">CSS/JS/HTML Playground</a></h5>\ An HTML, CSS, Javascript playground to test and share code snippets.\ </div>\ </center>'; var promotwo = document.querySelector(".g8byu82"); promotwo.style.width= ''; } } }, 1000); }; </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-55581850-1', 'auto', {'allowLinker': true}); ga('require', 'linker'); ga('require', 'GTM-PKH6F4B'); ga('linker:autoLink', ['danstools.com','unixtimestamp.com','url-encode-decode.com','cssfontstack.com','hexcolortool.com','htaccessredirect.net','jspretty.com','jsmini.com','jsobfuscate.com','md5hashgenerator.com','regextester.com','cleancss.com','favicon-generator.org','website-performance.org','permissions-calculator.org','conversoes.org','convertissez.fr','convertitore.net','elconvertidor.com','files-conversion.com','henkan-muryo.com','konvertirung.org','konvertor.org','tahwil.net','zhuan-huan.com','bootsnipp.com'] ); ga('send', 'pageview'); </script> <script data-ad-client="ca-pub-8815422507798180" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> </head> <body> <nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation" style="z-index: 9999999"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="animbrand"> <a style="padding-top:10px;" class="navbar-brand animate" href="https://www.cssfontstack.com">CSS Fonts</a> <span class="text-muted" style="font-size:.75em; position:absolute; bottom:3px; left:30px">From <strong>Dan's Tools</strong></span> </div> </div>  <script> $(document).ready(function(){ $('.dropdown-submenu a.submenutest').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu>li>a:hover { background-color: #F5F5F5; border-left-width: 5px; padding-left: 15px; } .dropdown-submenu>.dropdown-menu>li>a { border-left: 0 solid #5FB0E4; color: #787878; font-size: 16px; font-weight: 400; padding: 10px 20px; white-space: nowrap; } .dropdown-submenu .dropdown-menu { min-width: 220px; top: 0; left: 100%; margin-top: -1px; } </style>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Web Dev</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://bootsnipp.com" rel="nofollow">HTML/JS/CSS Playground</a></li><li><a href="http://www.hexcolortool.com" rel="nofollow">HTML Color Codes</a></li><li><a href="http://www.cssfontstack.com" rel="nofollow">CSS Fonts</a></li><li><a href="http://www.cleancss.com/diff-compare-merge" rel="nofollow">Online Diff Tool</a></li><li><a href="http://www.htaccessredirect.net" rel="nofollow">.htaccess Generator</a></li><li><a href="http://www.regextester.com" rel="nofollow">RegEx Testing</a></li><li><a href="http://www.rgbtohex.net" rel="nofollow">RGB & HEX Color Explorer</a></li><li><a href="http://www.rgbtohex.net" rel="nofollow">RGB to HEX Color Converter</a></li><li><a href="http://www.unixtimestamp.com" rel="nofollow">TimeStamp Converter</a></li><li><a href="http://website-performance.org" rel="nofollow">Website Speed Test</a></li><li><a href="http://www.favicon-generator.org" rel="nofollow">Favicon.ico & App Icon Generator</a></li><li><a href="http://www.favicon-generator.org/image-editor" rel="nofollow">Online Image Editor</a></li><li><a href="http://spritegen.website-performance.org" rel="nofollow">CSS Sprite Generator</a></li><li><a href="http://www.cleancss.com/keyword-tool" rel="nofollow">Keyword Tool</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Conversion</span> </a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-submenu"> <a href="#" tabindex="-1" class="submenutest"> <span>Data</span> <i class="glyphicon glyphicon-triangle-right pull-right" style="font-size:75%"></i> </a> <ul class="dropdown-menu"> <li><a href="http://www.cleancss.com/CSV-to-HTML" rel="nofollow">CSV To HTML Converter</a></li><li><a href="http://www.cleancss.com/CSV-to-JSON" rel="nofollow">CSV To JSON Converter</a></li><li><a href="http://www.cleancss.com/CSV-to-TSV" rel="nofollow">CSV To TSV Converter</a></li><li><a href="http://www.cleancss.com/CSV-to-XML" rel="nofollow">CSV To XML Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-CSV" rel="nofollow">JSON To CSV Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-HTML" rel="nofollow">JSON To HTML Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-TSV" rel="nofollow">JSON To TSV Converter</a></li><li><a href="http://www.cleancss.com/JSON-to-XML" rel="nofollow">JSON To XML Converter</a></li><li><a href="http://www.cleancss.com/XML-to-CSV" rel="nofollow">XML To CSV Converter</a></li><li><a href="http://www.cleancss.com/XML-to-HTML" rel="nofollow">XML To HTML Converter</a></li><li><a href="http://www.cleancss.com/XML-to-JSON" rel="nofollow">XML To JSON Converter</a></li><li><a href="http://www.cleancss.com/XML-to-TSV" rel="nofollow">XML To TSV Converter</a></li><li><a href="http://www.files-conversion.com" rel="nofollow">Convert Files</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" tabindex="-1" class="submenutest"> <span>Numbers</span> <i class="glyphicon glyphicon-triangle-right pull-right" style="font-size:75%"></i> </a> <ul class="dropdown-menu"> <li><a href="http://www.cleancss.com/binary-converter" rel="nofollow">Binary Converter</a></li><li><a href="http://www.cleancss.com/binary-to-decimal" rel="nofollow">Binary To Decimal Converter</a></li><li><a href="http://www.cleancss.com/binary-to-hex" rel="nofollow">Binary To Hex Converter</a></li><li><a href="http://www.cleancss.com/binary-to-octal" rel="nofollow">Binary To Octal Converter</a></li><li><a href="http://www.cleancss.com/convert-units" rel="nofollow">Unit Converter</a></li><li><a href="http://www.cleancss.com/decimal-to-binary" rel="nofollow">Decimal To Binary Converter</a></li><li><a href="http://www.cleancss.com/decimal-to-hex" rel="nofollow">Decimal To Hex Converter</a></li><li><a href="http://www.cleancss.com/decimal-to-octal" rel="nofollow">Decimal To Octal Converter</a></li><li><a href="http://www.cleancss.com/hex-to-binary" rel="nofollow">Hex To Binary Converter</a></li><li><a href="http://www.cleancss.com/hex-to-decimal" rel="nofollow">Hex To Decimal Converter</a></li><li><a href="http://www.cleancss.com/hex-to-octal" rel="nofollow">Hex To Octal Converter</a></li><li><a href="http://www.cleancss.com/how-many-bytes" rel="nofollow">Data Size Converter</a></li><li><a href="http://www.cleancss.com/octal-to-binary" rel="nofollow">Octal To Binary Converter</a></li><li><a href="http://www.cleancss.com/octal-to-decimal" rel="nofollow">Octal To Decimal Converter</a></li><li><a href="http://www.cleancss.com/octal-to-hex" rel="nofollow">Octal To Hex Converter</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" tabindex="-1" class="submenutest"> <span>Strings</span> <i class="glyphicon glyphicon-triangle-right pull-right" style="font-size:75%"></i> </a> <ul class="dropdown-menu"> <li><a href="http://www.cleancss.com/binary-to-string" rel="nofollow">Binary To String Converter</a></li><li><a href="http://www.cleancss.com/hex-to-string" rel="nofollow">Hex To String Converter</a></li><li><a href="http://www.cleancss.com/html-escape" rel="nofollow">HTML Entities Escape</a></li><li><a href="http://www.cleancss.com/html-unescape" rel="nofollow">HTML Entities Unescape</a></li><li><a href="http://www.cleancss.com/string-to-binary" rel="nofollow">String To Binary Converter</a></li><li><a href="http://www.cleancss.com/string-to-hex" rel="nofollow">String To Hex Converter</a></li><li><a href="http://www.cleancss.com/strip-html" rel="nofollow">Strip and Remove HTML Tags</a></li><li><a href="http://www.cleancss.com/strip-xml" rel="nofollow">Strip and Remove XML Tags</a></li><li><a href="http://www.cleancss.com/word-counter" rel="nofollow">Word Counter</a></li><li><a href="http://www.cleancss.com/xml-escape" rel="nofollow">XML Entities Escape</a></li><li><a href="http://www.cleancss.com/xml-unescape" rel="nofollow">XML Entities Unescape</a></li> </ul> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Encode/Decoders</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://www.cleancss.com/base64-decode" rel="nofollow">Base64 Decode</a></li><li><a href="http://www.cleancss.com/base64-encode" rel="nofollow">Base64 Encode</a></li><li><a href="http://www.md5hashgenerator.com" rel="nofollow">MD5 Hash Generator</a></li><li><a href="http://www.cleancss.com/sha1-generator" rel="nofollow">SHA-1 Hash Generator</a></li><li><a href="http://www.cleancss.com/sha256-hash-generator" rel="nofollow">SHA-256 Hash Generator</a></li><li><a href="http://www.cleancss.com/sha512-hash-generator" rel="nofollow">SHA-512 Hash Generator</a></li><li><a href="http://www.url-encode-decode.com" rel="nofollow">URL Encode/Decode</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Formatters</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://www.cleancss.com/css-beautify" rel="nofollow">CSS Formatter</a></li><li><a href="http://www.cleancss.com/go-beautify" rel="nofollow">GO Formatter</a></li><li><a href="http://www.cleancss.com/html-beautify" rel="nofollow">HTML Beautifier & Formatter</a></li><li><a href="http://www.cleancss.com/javascript-beautify" rel="nofollow">Javascript Formatter</a></li><li><a href="http://www.cleancss.com/javascript-obfuscate" rel="nofollow">Javascript Obfuscate</a></li><li><a href="http://www.cleancss.com/json-beautify" rel="nofollow">JSON Formatter & Beautifier</a></li><li><a href="http://www.cleancss.com/json-editor" rel="nofollow">JSON Editor</a></li><li><a href="http://www.cleancss.com/json-validator" rel="nofollow">JSON Validator</a></li><li><a href="http://www.cleancss.com/perl-beautify" rel="nofollow">Perl Formatter</a></li><li><a href="http://www.cleancss.com/php-beautify" rel="nofollow">PHP Formatter</a></li><li><a href="http://www.cleancss.com/python-beautify" rel="nofollow">Python Formatter</a></li><li><a href="http://www.cleancss.com/ruby-beautify" rel="nofollow">Ruby Formatter</a></li><li><a href="http://www.cleancss.com/sql-beautify" rel="nofollow">SQL Formatter</a></li><li><a href="http://www.cleancss.com/xml-beautify" rel="nofollow">XML Formatter & Beautifier</a></li><li><a href="http://www.cleancss.com/css-minify" rel="nofollow">CSS Minify</a></li><li><a href="http://www.cleancss.com/javascript-minify" rel="nofollow">Javascript Minify</a></li><li><a href="http://www.cleancss.com/json-minify" rel="nofollow">JSON Minify</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="caret"></i> <span>Internet</span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="http://www.cleancss.com/email-validator" rel="nofollow">Email Validator</a></li><li><a href="http://www.cleancss.com/is-it-up-or-down" rel="nofollow">Is It Up Or Down</a></li><li><a href="http://www.cleancss.com/router-default" rel="nofollow">Default Router Settings</a></li><li><a href="http://www.cleancss.com/user-manuals" rel="nofollow">User Manuals</a></li><li><a href="http://www.cleancss.com/what-is-my-ip" rel="nofollow">What is my IP</a></li> </ul> </li> <li><a data-toggle="modal" href="#JoinModal">Join</a></li><li><a data-toggle="modal" href="#LoginModal">Login</a></li> </ul> </div> </div>  </nav> <div class="container" style="margin-top:30px;margin-bottom:20px;"> <div class="col-md-9 col-xl-10"> <h3 class="text-center hidden-xs hidden-sm hidden"></h3> <br/> <script type="text/javascript" src="//dpidudyah7i0b.cloudfront.net/js/jquery.min.js"></script> <script type='text/javascript' src='//dpidudyah7i0b.cloudfront.net/js/zeroclipboard.js'></script> <script type="text/javaScript"> ZeroClipboard.setMoviePath( '//dpidudyah7i0b.cloudfront.net/js/zeroclipboard.swf' ); jQuery(document).ready(function() { jQuery('.copy').mouseover(function() { var txt = jQuery(this).attr("title"); var url = jQuery(this).attr("href"); clip = new ZeroClipboard.Client(); clip.setHandCursor(true); clip.setText(txt); clip.glue(this); clip.addEventListener('complete', function(client, text) { alert("Copied to clipboard! Don't forget to share." ); if (url!=undefined){ //this is for window.location=url; //<a href links } //to do it }); }); }); </script>  <div class="row-fluid"> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nova+Flat" /><br /> <div id="ezoic-pub-ad-placeholder-101"> <div style="margin-bottom:20px;margin:auto"> <ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="auto" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>   <div class="box"><div class="box-content"><style> .example { -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 3px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 3px 10px; box-shadow: rgba(0, 0, 0, 0.4) 0 3px 10px; padding: 18px 20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } </style> <div class="row"><div class="column col-md-6"><div class="row"><div class="col-xs-12 ow-server"><h5 class="page-header">Font Name:</h5> <h1 style="margin-top:2px; font-family: Nova Flat; !important">Nova Flat</h1></div><script> /* $(function() { $("img.lazy").lazyload(); }); */ $( document ).ready(function() { // Load any settings from local storage var pageElements = ['header','subheading','paragraph','blockquote','preformatted']; loadFontSettings(); fontcss(); // Save setting $('#exsave').click(function() { if ($('#fontsource').val()) { localStorage[$('#whichfont').val()] = $('#fontsource').val(); } pageElements.forEach(function(v) { if ($('#whichex').val() == 'ex'+v) { localStorage[v] = JSON.stringify($('.ex'+v).css()); } }); // if ($('#exsavetxt').text() == 'Sub Heading') { localStorage[$('#exsavetxt').text()] = JSON.stringify($('.exsubheading').css()); } // if ($('#exsavetxt').text() == 'Paragraph') { localStorage[$('#exsavetxt').text()] = JSON.stringify($('.expara').css()); } // if ($('#exsavetxt').text() == 'Block Quote') { localStorage[$('#exsavetxt').text()] = JSON.stringify($('.exblockquote').css()); } // if ($('#exsavetxt').text() == 'Preformatted') { localStorage[$('#exsavetxt').text()] = JSON.stringify($('.expre').css()); } }); $('#exsize').change(function() { $('.'+$('#whichex').val()).css('font-size',$('#exsize').val()+'px'); fontcss(); }); $('#exstyle').change(function() { $('.'+$('#whichex').val()).css('font-style',$('#exstyle').val()); fontcss(); }); $('#exlineheight').change(function() { $('.'+$('#whichex').val()).css('line-height',$('#exlineheight').val()); fontcss(); }); $('#exvariant').change(function() { $('.'+$('#whichex').val()).css('font-variant',$('#exvariant').val()); fontcss(); }); $('#weight').change(function() { $('.'+$('#whichex').val()).css('font-weight',$('#weight').val()); fontcss(); }); $('#whichfont').change(function() { $('.'+$('#whichex').val()).css('font-family',$('#whichfont').val()); $('.'+$('#whichex').val()+' > .stackname').text($('#whichfont option:selected').text()); fontcss(); }); $('#whichex').change(function() { $('.'+$('#whichex').val()).css('font-family',$('#whichfont').val()); $('.'+$('#whichex').val()).css('font-size',$('#exsize').val()); $('.'+$('#whichex').val()).css('font-style',$('#exstyle').val()); $('.'+$('#whichex').val()).css('line-height',$('#exlineheight').val()); $('.'+$('#whichex').val()).css('font-variant',$('#exvariant').val()); $('.'+$('#whichex').val()).css('font-weight',$('#weight').val()); $('.'+$('#whichex').val()+' > .stackname').text($('#whichfont option:selected').text()); $('#exsavetxt').text($('#whichex option:selected').text()); $('#exsave').removeAttr('disabled'); fontcss(); }); $('#goldenratio').click(function() { ratio = 1.618034; psize = parseInt($('.exparagraph').css('font-size').replace(/\D/g,'')); lineheight = Math.round(psize*ratio); hsize = lineheight; shsize = Math.round(psize/(ratio/2)); presize = Math.round(psize*(ratio/2)); /* pageElements.forEach(function(v) { $('.ex'+v).css('font-size',hsize+'px','line-height',lineheight+'px'); localStorage[v] = JSON.stringify($('.ex'+v).css()); }); */ $('.exheader').css('font-size',hsize+'px'); $('.exheader').css('line-height',lineheight+'px'); $('.exsubheading').css('font-size',shsize+'px'); $('.exsubheading').css('line-height',lineheight+'px'); $('.exparagraph').css('font-size',psize+'px'); $('.exparagraph').css('line-height',lineheight+'px'); $('.exblockquote').css('font-size',shsize+'px'); $('.exblockquote').css('line-height',lineheight+'px'); $('.expreformatted').css('font-size',presize+'px'); $('.expreformatted').css('line-height',lineheight+'px'); localStorage['header'] = JSON.stringify($('.exheader').css()); localStorage['subheading'] = JSON.stringify($('.exsubheading').css()); localStorage['paragraph'] = JSON.stringify($('.exparagraph').css()); localStorage['blockquote'] = JSON.stringify($('.exblockquote').css()); localStorage['preformatted']= JSON.stringify($('.expreformatted').css()); fontcss(); }); $('#resetButton').click(function() { resetFontSettings(); }); function loadFontSettings() { pageElements.forEach(function(v) { if (localStorage[v]) { vJson = JSON.parse(localStorage[v]); $('.ex'+v).css(vJson); $('.ex'+v+' > .stackname').text(vJson['font-family']); if (localStorage[vJson['font-family']] == 'google') { html = "<link rel='stylesheet' href='//fonts.googleapis.com/css?family="+vJson['font-family']+"' type='text/css' />"; $('#webfonthtml').append(htmlEntities(html)+'\n'); $("head").append(html); } } }); /* if (localStorage['Header']) { saved = JSON.parse(localStorage['Header']); $('.exheader').css(JSON.parse(localStorage['Header'])); $('.exheader > .stackname').text(JSON.parse(localStorage['Header'])['font-family']); } if (localStorage['Sub Heading']) { $('.exsubheading').css(JSON.parse(localStorage['Sub Heading'])); $('.exsubheading > .stackname').text(JSON.parse(localStorage['Sub Heading'])['font-family']); } if (localStorage['Paragraph']) { $('.expara').css(JSON.parse(localStorage['Paragraph'])); $('.expara > .stackname').text(JSON.parse(localStorage['Paragraph'])['font-family']); } if (localStorage['Block Quote']) { $('.exblockquote').css(JSON.parse(localStorage['Block Quote'])); $('.exblockquote > .stackname').text(JSON.parse(localStorage['Block Quote'])['font-family']); } if (localStorage['Preformatted']) { $('.expre').css(JSON.parse(localStorage['Preformatted'])); $('.expre > .stackname').text(JSON.parse(localStorage['Preformatted'])['font-family']); } */ } function resetFontSettings() { pageElements.forEach(function(v) { localStorage.removeItem(v); }); } function fontcss() { var a = $('.exheader'); var text = "h1 {\n\tfont-family: "+a.css('font-family')+";\n\tfont-size: "+a.css('font-size')+";\n\tfont-style: "+a.css('font-style')+";\n\tfont-variant: "+a.css('font-variant')+";\n\tfont-weight: "+a.css('font-weight')+";\n\tline-height: "+a.css('line-height')+";\n}\n"; var a = $('.exsubheading'); var text = text+"h3 {\n\tfont-family: "+a.css('font-family')+";\n\tfont-size: "+a.css('font-size')+";\n\tfont-style: "+a.css('font-style')+";\n\tfont-variant: "+a.css('font-variant')+";\n\tfont-weight: "+a.css('font-weight')+";\n\tline-height: "+a.css('line-height')+";\n}\n"; var a = $('.exparagraph'); var text = text+"p {\n\tfont-family: "+a.css('font-family')+";\n\tfont-size: "+a.css('font-size')+";\n\tfont-style: "+a.css('font-style')+";\n\tfont-variant: "+a.css('font-variant')+";\n\tfont-weight: "+a.css('font-weight')+";\n\tline-height: "+a.css('line-height')+";\n}\n"; var a = $('.exblockquote'); var text = text+"blockquote {\n\tfont-family: "+a.css('font-family')+";\n\tfont-size: "+a.css('font-size')+";\n\tfont-style: "+a.css('font-style')+";\n\tfont-variant: "+a.css('font-variant')+";\n\tfont-weight: "+a.css('font-weight')+";\n\tline-height: "+a.css('line-height')+";\n}\n"; var a = $('.expreformatted'); var text = text+"pre {\n\tfont-family: "+a.css('font-family')+";\n\tfont-size: "+a.css('font-size')+";\n\tfont-style: "+a.css('font-style')+";\n\tfont-variant: "+a.css('font-variant')+";\n\tfont-weight: "+a.css('font-weight')+";\n\tline-height: "+a.css('line-height')+";\n}"; $('#fontcss').text(text); return text; } function css(a) { var sheets = document.styleSheets, o = {}; for (var i in sheets) { var rules = sheets[i].rules || sheets[i].cssRules; for (var r in rules) { if (a.is(rules[r].selectorText)) { o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style'))); } } } return o; } function htmlEntities(str) { return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); } function css2json(css) { var s = {}; if (!css) return s; if (css instanceof CSSStyleDeclaration) { for (var i in css) { if ((css[i]).toLowerCase) { s[(css[i]).toLowerCase()] = (css[css[i]]); } } } else if (typeof css == "string") { css = css.split("; "); for (var i in css) { var l = css[i].split(": "); s[l[0].toLowerCase()] = (l[1]); } } return s; } jQuery.fn.css = (function(css2) { return function() { if (arguments.length) { return css2.apply(this, arguments); } var attr = ['font-family','font-size','font-weight','font-style','color', 'text-transform','text-decoration','letter-spacing','word-spacing','font-variant', 'line-height']; var len = attr.length, obj = {}; for (var i = 0; i < len; i++) { obj[attr[i]] = css2.call(this, attr[i]); } return obj; }; })(jQuery.fn.css); }); </script> <style> .example h3 { font-family: Nova Flat; } .example h5 { font-family: Nova Flat; } .example p { font-family: Nova Flat; } .example blockquote { font-family: Nova Flat; } .example pre { font-family: Nova Flat; } .ow-server { padding-bottom: 10px; } </style> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 ow-server" style="display: none;"><select style="display: none;" id="whichfont"><option value="Nova Flat">Nova Flat</option></select> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 ow-server"><h5 class="page-header">Size</h5> <select class="btn btn-default" id="exsize" name="exsize"> <option value="">Select One:</option> <option value="1">1 px</option><option value="2">2 px</option><option value="3">3 px</option><option value="4">4 px</option><option value="5">5 px</option><option value="6">6 px</option><option value="7">7 px</option><option value="8">8 px</option><option value="9">9 px</option><option value="10">10 px</option><option value="11">11 px</option><option value="12">12 px</option><option value="13">13 px</option><option value="14">14 px</option><option value="15">15 px</option><option value="16">16 px</option><option value="17">17 px</option><option value="18">18 px</option><option value="19">19 px</option><option value="20">20 px</option><option value="21">21 px</option><option value="22">22 px</option><option value="23">23 px</option><option value="24">24 px</option><option value="25">25 px</option><option value="26">26 px</option><option value="27">27 px</option><option value="28">28 px</option><option value="29">29 px</option><option value="30">30 px</option><option value="31">31 px</option><option value="32">32 px</option><option value="33">33 px</option><option value="34">34 px</option><option value="35">35 px</option><option value="36">36 px</option><option value="37">37 px</option><option value="38">38 px</option><option value="39">39 px</option><option value="40">40 px</option><option value="41">41 px</option><option value="42">42 px</option><option value="43">43 px</option><option value="44">44 px</option><option value="45">45 px</option><option value="46">46 px</option><option value="47">47 px</option><option value="48">48 px</option><option value="49">49 px</option></select></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 ow-server"><h5 class="page-header">Weight</h5> <select class="btn btn-default" id="weight" name="weight"> <option value="">Select One:</option> <option value="normal">Normal</option> <option value="bold">Bold</option> <option value="bolder">Bolder</option> <option value="lighter">Lighter</option> </select></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 ow-server"><h5 class="page-header">Style</h5> <select class="btn btn-default" id="exstyle" name="style"> <option value="">Select One:</option> <option value="normal">Normal</option> <option value="italic">Italic</option> <option value="oblique">Oblique</option> </select></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 ow-server"><h5 class="page-header">Variant</h5> <select class="btn btn-default" id="exvariant" name="style"> <option value="">Select One:</option> <option value="normal">Normal</option> <option value="small-caps">Small Caps</option> </select></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 ow-server"><h5 class="page-header">Line Height</h5> <select class="btn btn-default" id="exlineheight" name="style"> <option value="">Select One:</option> <option value="0.5">0.5</option><option value="0.6">0.6</option><option value="0.7">0.7</option><option value="0.8">0.8</option><option value="0.9">0.9</option><option value="1">1</option><option value="1.1">1.1</option><option value="1.2">1.2</option><option value="1.3">1.3</option><option value="1.4">1.4</option><option value="1.5">1.5</option><option value="1.6">1.6</option><option value="1.7">1.7</option><option value="1.8">1.8</option><option value="1.9">1.9</option><option value="2">2</option><option value="2.1">2.1</option><option value="2.2">2.2</option><option value="2.3">2.3</option><option value="2.4">2.4</option><option value="2.5">2.5</option><option value="2.6">2.6</option><option value="2.7">2.7</option><option value="2.8">2.8</option><option value="2.9">2.9</option><option value="3">3</option><option value="3.1">3.1</option><option value="3.2">3.2</option><option value="3.3">3.3</option><option value="3.4">3.4</option><option value="3.5">3.5</option><option value="3.6">3.6</option><option value="3.7">3.7</option><option value="3.8">3.8</option><option value="3.9">3.9</option><option value="4">4</option><option value="4.1">4.1</option><option value="4.2">4.2</option><option value="4.3">4.3</option><option value="4.4">4.4</option><option value="4.5">4.5</option><option value="4.6">4.6</option><option value="4.7">4.7</option><option value="4.8">4.8</option><option value="4.9">4.9</option><option value="5">5</option></select></div> <div class="clearfix"></div> <div class="col-xs-12 ow-server"><h5 class="page-header">Apply To</h5> <select class="btn btn-default" id="whichex" name="example"> <option value="exheader">Header</option> <option value="exsubheading">Sub Heading</option> <option value="exparagraph">Paragraph</option> <option value="exblockquote">Block Quote</option> <option value="expreformatted">Preformatted</option> </select> <button class="btn btn-primary" id="exsave">Save <span id="exsavetxt">Heading</span> Setting</button> </div> <input type="hidden" id="fontsource" value="google" /><span id="debug"></span> <div class="col-xs-12">HTML: <br /><code id="webfonthtml"><link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nova+Flat" /></code></div><div class="col-xs-12">CSS: <br /><code id="fontcss">.class { font-family: Nova Flat } </code></div></div></div><div class="column col-md-6"> <h3>Preview Your Fonts</h3> <article class='example'> <h3 class="exheader">Your headline is in <span class="stackname">Nova Flat</span></h3> <h5 class="exsubheading">This is a sub heading in <span class="stackname">Nova Flat</span>.</h5> <p class="exparagraph">This paragraph is in <span class="stackname">Nova Flat</span>. Keep reading for how to use the buttons to the left. Change your settings, and choose what section you want the font to apply to. Once you are pleased with the settings for that section you can click save. Your selections will remain as you look for another font for another section of this preview.</p> <h5 class="exsubheading">Another sub heading in <span class="stackname">Nova Flat</span>.</h5> <blockquote class="exblockquote" style="margin-left:5px; width:40%; float: right; display: inline; border-left: 2px solid #dddddd; padding: 0 0 0 10px; font-size: 1.5em;"><span>Make other <span class="stackname">Nova Flat</span> text stand out! </span></blockquote> <p class="exparagraph"> The setting for a paragraph continues down here. There is a blockquote next to it. You may want to make that stand out. The setting for a paragraph continues down here. There is a blockquote next to it. You may want to make that stand out. The setting for a paragraph continues down here. There is a blockquote next to it. You may want to make that stand out. </p> <span> <pre class="expreformatted"> /* This text is in <span class="stackname">Nova Flat</span> */ .class { font-family: Nova Flat; } </pre></span> </article> <div style="margin-top:10px;"> <button style="float: right;" class="btn btn-default" id="resetButton" href="">Reset</a> <button class="btn btn-default" id="goldenratio" href="">Golden Ratio</button> <br /> <div style="width:50%;" class="text-muted">Apply Golden Ratio to font sizes and line height based on paragraph font size.</div> </div> </div> </div> </div></div>   </div> <div class="col-md-3 col-xl-2" style="margin-top:30px;"> <h4 class="text-muted">Related Tools: </h4><p><i class="fa fa-chevron-right"></i> <strong><a href="/Web-Fonts">Web Fonts</a></strong></p><p><i class="fa fa-chevron-right"></i> <strong><a href="https://www.hexcolortool.com">HTML Color Codes</a></strong></p><p><i class="fa fa-chevron-right"></i> <strong><a href="https://www.htaccessredirect.net">.htaccess Generator</a></strong></p><hr/> <script> $( document ).ready(function() { if (1==0 && window.canRunAds === true) { $('#blocker').hide(); } else { $('#blocker').show(); } }); </script>  <div id="ezoic-pub-ad-placeholder-102"> <ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="vertical"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>  </div> </div> <div class="clearfix"></div> <footer class="bs-footer" role="contentinfo"> <div class="container"> <div class="bs-social"> <ul class="bs-social-buttons"> <li class="follow-btn"> <a id="js-twitter-follow" href="https://twitter.com/danstools00" class="twitter-follow-button" data-show-count="false">Follow @danstools00</a> </li> </ul> </div> <p>© 2014-2019 <a href="https://www.danstools.com" target="_blank">Dan's Tools</a> | <a href="/about.php">About</a> | <a href="/privacy.php" target="_blank">Privacy</a> | <a href="https://www.cleancss.com/tesla/">Tesla Referral Code</a></p> </div> </footer> <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-top:200px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">脳</span><span class="sr-only">Close</span></button> <h1 class="modal-title" id="lineModalLabel">Login</h1> </div> <div class="modal-body"> <p> If you don't already have an account, <a data-toggle="modal" href="#JoinModal">Register Now</a> </p> <form method="POST" action="/login.php"> <input class="form-control" type="text" name="username" placeholder="Email Address"><br /> <input class="form-control"type="password" name="password" placeholder="Password"><br /> <input class="form-control btn btn-primary" type="submit" value="Login"> </form> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="JoinModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-top:200px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">脳</span><span class="sr-only">Close</span></button> <h1 class="modal-title" id="lineModalLabel">Join</h1> </div> <div class="modal-body"> <p> Join to access discussion forums and premium features of the site. </p> <form method="POST" action="/join.php"> <input class="form-control" type="text" name="email" placeholder="Email Address"><br /> <input class="form-control"type="password" name="password" placeholder="Password"><br /> <input class="form-control btn btn-primary" type="submit" value="Join Now"> </form> <br /> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="ShareModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-top:200px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">脳</span><span class="sr-only">Close</span></button> <h1 class="modal-title" id="lineModalLabel">Please Share!</h1> </div> <div class="modal-body">  <strong><span id="sharetxt">Thank you for using my tool. If you could share this tool with your friends, that would be a huge help:</span></strong> <br /> <a href="https://twitter.com/share" class="twitter-share-button" data-via="twitterapi" data-lang="en" data-count="horizontal" data-url="http://www.cssfontstack.com">Tweet</a> <br /> <a href="//www.reddit.com/submit" onclick="window.location = '//www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false"> <img src="//www.redditstatic.com/spreddit7.gif" alt="submit to reddit" border="0" /> </a> <p /> <br/> <strong>Or follow us to learn about our latest tools:</strong> <br /> <a href="https://twitter.com/danstools00" class="twitter-follow-button" data-show-count="false">Follow @danstools00</a> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> </div> </div> </div> </div> </div> <script async src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script async src="/js/ads.js"></script> </body> </html>