CSS Font Properties

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="css font, code, codes, style, size, small caps, adjust, bold, coding css, stylesheets, cascading style sheets"> <meta name="Description" content="Learn about the CSS font properties and how to apply them to your website."> <link rel="canonical" href="https://www.quackit.com/css/tutorial/css_font.cfm"> <title>CSS Font Properties</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">CSS Font Properties</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/css/tutorial/css_id.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> CSS ID Selectors</a></li> <li><a href="/css/tutorial/css_text.cfm">CSS Text Properties <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">Here, we look at the various font properties. These are the properties in the <code>font</code> namespace — those that include the word <samp>font</samp> at the start of their name.</p> <p>CSS font properties enable you to change the look of your text. For example, you can assign a font family, apply bold or italic formatting, change the size and more. </p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h2>CSS Font Family</h2> <p>The <a href="/css/properties/css_font-family.cfm"><code>font-family</code></a> property allows you to set the font family.</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 p {
 font-family: Georgia, Garamond, serif;
 }
</style>

<p>This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_font-family_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>The <a href="/css/properties/css_font-family.cfm"><code>font-family</code></a> property accepts a list of different font families. This is because, not all users will have the same fonts installed on their computer. Therefore, as a designer/developer, you can provide a list of fonts, starting with your first choice, and ending with your last choice. </p> <p>So, if the user doesn't have your first choice font, the second choice will be used for that user. If they don't have the second choice, the third choice will be used, and so on. </p> <p>It's good practice to make your last choice a generic font family such as <code>serif</code> or <code>sans-serif</code> (depending on whether you want a font with serifs or not). This way, if none of the other choices are on the user's computer, their computer will choose a font that <em>is</em> on their computer, based on the generic family that you provide.</p> <h2>CSS Font Size</h2> <p>Enables you to set the size of the text. For info on the possible values, see the <a href="/css/properties/css_font-size.cfm"><code>font-size</code></a> page.</p> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 p {
 font-size: 30px;
 }
</style>

<p>This text is using a font size of 30 pixels.</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_font-size_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>CSS Font Size Adjust</h2> <p>This property enables you to adjust the x-height to make fonts more legible. For more info, see the <a href="/css/properties/css_font-size-adjust.cfm"><code>font-size-adjust</code></a> page.</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 p {
 font-size: 12px;
 font-size-adjust: 0.58;
 }
</style>

<p>This text is using a font-size-adjust value.</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_font-size-adjust_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>CSS Font Stretch</h2> <p>This property relies on the user's computer to have an expanded or condensed version of the font being used. For all possible values, see the <a href="/css/properties/css_font-stretch.cfm"><code>font-stretch</code></a> page.</p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 p {
 font-stretch: ultra-expanded;
 }
</style>

<p>If your computer has an expanded version of the font being used, this text will be stretched.</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_font-stretch_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>CSS Font Style</h2> <p>The <a href="/css/properties/css_font-style.cfm"><code>font-style</code></a> property is used for specifying italic text.</p> <div class="code-only"> <textarea id="example5" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 p {
 font-style: italic;
 }
</style>

<p>This text is in italics.</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_font-style_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode5 = CodeMirror.fromTextArea(document.getElementById("example5"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>CSS Font Variant</h2> <p>Enables you to set your text to use small caps. See <a href="/css/properties/css_font-variant.cfm"><code>font-variant</code></a>.</p> <div class="code-only"> <textarea id="example6" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 p {
 font-variant: small-caps;
 }
</style>

<p>This Text Is Using Small Caps.</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_font-variant_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode6 = CodeMirror.fromTextArea(document.getElementById("example6"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>CSS Font Weight</h2> <p>Enables you to set your text to bold. For more info, see <a href="/css/properties/css_font-weight.cfm"><code>font-weight</code></a>.</p> <div class="code-only"> <textarea id="example7" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 p {
 font-weight: bold;
 }
</style>

<p>This text is bold.</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_font-weight_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode7 = CodeMirror.fromTextArea(document.getElementById("example7"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>CSS Font Property</h2> <p>The <a href="/css/properties/css_font.cfm"><code>font</code></a> property is a shorthand property that enables you to set all font properties in one go.</p> <div class="code-only"> <textarea id="example8" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 p {
 font: italic small-caps bold 20px Georgia, Garamond, serif;
 }
</style>

<p>The styles for this text has been specified with the 'font' shorthand property.</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_font_property_shorthand_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode8 = CodeMirror.fromTextArea(document.getElementById("example8"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <ul class="pager"> <li><a href="/css/tutorial/css_id.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> CSS ID Selectors</a></li> <li><a href="/css/tutorial/css_text.cfm">CSS Text Properties <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/css/tutorial/">CSS Tutorial</a></h3> <ul> <li><a href="/css/tutorial/css_introduction.cfm">Introduction to CSS</a></li> <li><a href="/css/tutorial/css_syntax.cfm">CSS Syntax - How to Code CSS</a></li> <li><a href="/css/tutorial/implementing_css.cfm">How to add CSS to a Website</a></li> <li><a href="/css/tutorial/css_class.cfm">CSS Class Selectors</a></li> <li><a href="/css/tutorial/css_id.cfm">CSS ID Selectors</a></li> <li><a href="/css/tutorial/css_font.cfm">CSS Font Properties</a></li> <li><a href="/css/tutorial/css_text.cfm">CSS Text Properties</a></li> <li><a href="/css/tutorial/css_height_width.cfm">CSS Height & Width Properties</a></li> <li><a href="/css/tutorial/css_background_code.cfm">CSS Background Code</a></li> <li><a href="/css/tutorial/css_border.cfm">CSS Border Properties</a></li> <li><a href="/css/tutorial/css_margin.cfm">CSS Margin Properties</a></li> <li><a href="/css/tutorial/css_padding.cfm">CSS Padding Properties</a></li> <li><a href="/css/tutorial/css_lists.cfm">How to Style Lists</a></li> <li><a href="/css/tutorial/css_positioning.cfm">CSS Positioning</a></li> <li><a href="/css/tutorial/css_float.cfm">CSS Float</a></li> <li><a href="/css/tutorial/css_layers.cfm">CSS Layers</a></li> <li><a href="/css/tutorial/css_flexbox_and_grid.cfm">CSS Flexbox & Grid</a></li> <li><a href="/css/tutorial/css_summary.cfm">CSS Summary</a></li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

CSS Font Properties