{"id":14053,"date":"2011-09-05T20:43:54","date_gmt":"2011-09-06T03:43:54","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14053"},"modified":"2022-09-22T14:43:29","modified_gmt":"2022-09-22T21:43:29","slug":"font","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/","title":{"rendered":"font"},"content":{"rendered":"<p>The <code>font<\/code> property in CSS is a shorthand property that combines all the following sub-properties in a single declaration.<\/p>\n<pre><code class=\"language-css\">body {\n  font: normal small-caps normal 16px\/1.4 Georgia;\n}\n\n\/* is the same as:\n\nbody {\n  font-family: Georgia;\n  line-height: 1.4;\n  font-weight: normal;\n  font-stretch: normal;\n  font-variant: small-caps;\n  font-size: 16px;\n}\n *\/<\/code><\/pre>\n<p>There are seven <code>font<\/code> sub-properties, including:<\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-stretch\/\"><code>font-stretch<\/code><\/a>: this property sets the font width, such as condensed or expanded.\n<ul>\n<li><code>normal<\/code><\/li>\n<li><code>ultra-condensed<\/code><\/li>\n<li><code>extra-condensed<\/code><\/li>\n<li><code>condensed<\/code><\/li>\n<li><code>semi-condensed<\/code><\/li>\n<li><code>semi-expanded<\/code><\/li>\n<li><code>expanded<\/code><\/li>\n<li><code>extra-expanded<\/code><\/li>\n<li><code>ultra-expanded<\/code><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-style\"><code>font-style<\/code><\/a>: makes the text appear italicised or oblique.\n<ul>\n<li><code>normal<\/code><\/li>\n<li><code>italic<\/code><\/li>\n<li><code>oblique<\/code><\/li>\n<li><code>inherit<\/code><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant\"><code>font-variant<\/code><\/a>: changes target text to small caps.\n<ul>\n<li><code>normal<\/code><\/li>\n<li><code>small-caps<\/code><\/li>\n<li><code>inherit<\/code><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-weight\"><code>font-weight<\/code><\/a>: sets the weight or the thickness of the font.\n<ul>\n<li><code>normal<\/code><\/li>\n<li><code>bold<\/code><\/li>\n<li><code>bolder<\/code><\/li>\n<li><code>lighter<\/code><\/li>\n<li><code>100, 200, 300, 400, 500, 600, 700, 800, 900<\/code><\/li>\n<li><code>inherit<\/code><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-size\"><code>font-size<\/code><\/a>: sets the height of the font.\n<ul>\n<li><code>xx-small<\/code><\/li>\n<li><code>x-small<\/code><\/li>\n<li><code>small<\/code><\/li>\n<li><code>medium<\/code><\/li>\n<li><code>large<\/code><\/li>\n<li><code>x-large<\/code><\/li>\n<li><code>xx-large<\/code><\/li>\n<li><code>smaller, larger<\/code><\/li>\n<li><code>percentage<\/code><\/li>\n<li><code>inherit<\/code><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-height\"><code>line-height<\/code><\/a>: defines the amount of space above and below inline elements.\n<ul>\n<li><code>normal<\/code><\/li>\n<li><code>number (font-size multiplier)<\/code><\/li>\n<li><code>percentage<\/code><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-family\"><code>font-family<\/code><\/a>: definies the font that is applied to the element.\n<ul>\n<li><code>sans-serif<\/code><\/li>\n<li><code>serif<\/code><\/li>\n<li><code>monospace<\/code><\/li>\n<li><code>cursive<\/code><\/li>\n<li><code>fantasy<\/code><\/li>\n<li><code>caption<\/code><\/li>\n<li><code>icon<\/code><\/li>\n<li><code>menu<\/code><\/li>\n<li><code>message-box<\/code><\/li>\n<li><code>small-caption<\/code><\/li>\n<li><code>status-bar<\/code><\/li>\n<li><code>\"string\"<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Font Shorthand Gotchas<\/h3>\n<p>The <code>font<\/code> property is not as straightforward as other shorthand properties, partly due to the syntax requirements for it, and partly due to inheritance issues.<\/p>\n<p>Here is a summary of some of the things you should know when using this shorthand property.<\/p>\n<h4>Mandatory Values<\/h4>\n<p>Two of the values in <code>font<\/code> shorthand are mandatory: <code>font-size<\/code> and <code>font-family<\/code>. If either of these is not included, the entire declaration will be ignored.<\/p>\n<p>Also, <code>font-family<\/code> must be declared last of all values, otherwise, again, the entire declaration will be ignored.<\/p>\n<h4>Optional Values<\/h4>\n<p>All five of the other values are optional. If you include any of <code>font-style<\/code>, <code>font-variant<\/code>, and <code>font-weight<\/code>, they must come before <code>font-size<\/code> in the declaration. If they aren&#8217;t, they will be ignored and may also cause the mandatory values to be ignored.<\/p>\n<pre><code class=\"language-css\">body {\n    font: italic small-caps bold 44px Georgia, sans-serif;\n}<\/code><\/pre>\n<p>In the above example, three optionals are included. As long as these are defined before <code>font-size<\/code>, they can be placed in any order.<\/p>\n<p>Including <code>line-height<\/code> is likewise optional but may be declared only after <code>font-size<\/code> and only following a forward slash:<\/p>\n<pre><code class=\"language-css\">body {\n    font: 44px\/20px Georgia, sans-serif;\n}<\/code><\/pre>\n<p>In the above example, the <code>line-height<\/code> is &#8220;20px&#8221;. If you omit <code>line-height<\/code>, you must also omit the slash, otherwise the entire line will be ignored.<\/p>\n<h4>Using font-stretch<\/h4>\n<p>The <code>font-stretch<\/code> property is new in CSS3 so if it is used in an older browser that doesn&#8217;t support <code>font-stretch<\/code> in <code>font<\/code> shorthand, it will cause the entire line to be ignored.<\/p>\n<p>The spec recommends including a fallback without <code>font-stretch<\/code>, like this:<\/p>\n<pre><code class=\"language-css\">body {\n    font: italic small-caps bold 44px Georgia, sans-serif; \/* fallback for older browsers *\/\n    font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif;\n}<\/code><\/pre>\n<h4>Inheritance for optionals<\/h4>\n<p>If you omit any of the optional values (including <code>line-height<\/code>), the omitted optionals will not inherit values from their parent element, as is often the case with typographical properties. Instead, they will be reset to their initial state.<\/p>\n<p>For example:<\/p>\n<pre><code class=\"language-css\">body {\n    font: italic small-caps bold 44px\/50px Georgia, sans-serif;\n}\n\np {\n    font: 30px Georgia, sans-serif;\n}<\/code><\/pre>\n<p>In this case, the optional values (italic, small-caps, and bold) are placed on the <code>font<\/code> declaration on the <code><\/code> element. These will also apply to most child elements.<\/p>\n<p>However, because we&#8217;ve redeclared the <code>font<\/code> property on the paragraph elements, all the optionals will be reset on the paragraphs, causing the style, variant, weight, and line-height to revert to their initial values.<\/p>\n<h3>Keywords for Defining System Fonts<\/h3>\n<p>In addition to the above syntax, the <code>font<\/code> property also allows use of keywords as values. They are:<\/p>\n<ul>\n<li><code>caption<\/code><\/li>\n<li><code>icon<\/code><\/li>\n<li><code>menu<\/code><\/li>\n<li><code>message-box<\/code><\/li>\n<li><code>small-caption<\/code><\/li>\n<li><code>status-bar<\/code><\/li>\n<\/ul>\n<p>These keyword values set the font to the one that is used on the user&#8217;s operating system for that particular category. For example, defining &#8220;caption&#8221; will set the font on that element to use the same font that is used on the operating system for captioned controls (buttons, drop-downs, etc).<\/p>\n<p>A single keyword comprises the entire value:<\/p>\n<pre><code class=\"language-css\">body {\n    font: menu;\n}<\/code><\/pre>\n<p>The other properties mentioned earlier are not valid in conjunction with these keywords. These keywords can only be used with <code>font<\/code> shorthand and cannot be declared using any of the individual longhand properties.<\/p>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-stretch\/\">font-stretch<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant\/\">font-variant<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-style\/\">font-style<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-weight\/\">font-weight<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-height\/\">line-height<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-size\/\">font-size<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-family\/\">font-family<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/os-specific-fonts-css\/\">OS specific fonts in CSS<\/a><\/li>\n<\/ul>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#font-prop\" rel=\"noopener\">W3C Spec<\/a><\/li>\n<li>CSS-Tricks article: <a href=\"https:\/\/css-tricks.com\/css-font-size\/\">px \u2013 em \u2013 % \u2013 pt \u2013 keyword<\/a><\/li>\n<li>Jonathan Snook: <a href=\"http:\/\/snook.ca\/archives\/html_and_css\/font-size-with-rem\" rel=\"noopener\">font size with rem<\/a><\/li>\n<li><a href=\"http:\/\/www.impressivewebs.com\/a-primer-on-the-css-font-shorthand-property\/\" rel=\"noopener\">A Primer on the CSS Font Shorthand Property<\/a><\/li>\n<li><a href=\"http:\/\/www.impressivewebs.com\/css-font-shorthand-property-cheat-sheet\/\" rel=\"noopener\">CSS Font Shorthand Property Cheat Sheet<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\">Chrome<\/th>\n<th class=\"safari\">Safari<\/th>\n<th class=\"firefox\">Firefox<\/th>\n<th class=\"opera\">Opera<\/th>\n<th class=\"ie\">IE<\/th>\n<th class=\"android\">Android<\/th>\n<th class=\"iOS\">iOS<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The font property in CSS is a shorthand property that combines all the following sub-properties in a single declaration. body { font: normal small-caps normal 16px\/1.4 Georgia; } \/* is the same as: body { font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; } *\/ There are seven font sub-properties, including: [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":21993,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-stretch\/","url_meta":{"origin":14053,"position":0},"title":"font-stretch","date":"June 14, 2013","format":false,"excerpt":"The font-stretch property, introduced in CSS3, selects a normal, condensed or expanded face from a font. In order to use font-stretch and see a result of some kind, the font being used has to have a face that matches the value given. In other words, font-stretch will not work on\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3262,"url":"https:\/\/css-tricks.com\/snippets\/css\/meyer-reset\/","url_meta":{"origin":14053,"position":1},"title":"Meyer Reset","date":"August 6, 2009","format":false,"excerpt":"html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322037,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-kerning\/","url_meta":{"origin":14053,"position":2},"title":"font-kerning","date":"September 25, 2020","format":false,"excerpt":"The CSS font-kerning property defines the way specific pairs of letters are spaced. You see, fonts often contain information about how much breathing room a character has on its left and right edges. The proper term for the spacing is sidebearings. When two characters are placed next to each other,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22053,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant\/","url_meta":{"origin":14053,"position":3},"title":"font-variant","date":"June 17, 2013","format":false,"excerpt":"The font-variant property allows you to change the targeted text to small caps. This property has been extended in CSS3. p:first-line { font-variant: small-caps; \/* default is `normal` *\/ } Before CSS3, this property accepted one of two possible values: normal (how text is rendered by default) and small-caps. A\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22055,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-weight\/","url_meta":{"origin":14053,"position":4},"title":"font-weight","date":"June 17, 2013","format":false,"excerpt":"The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser. span { font-weight: bold; } The font-weight property accepts either a keyword value or predefined numeric value. The available keywords are:\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6591,"url":"https:\/\/css-tricks.com\/snippets\/css\/font-stacks\/","url_meta":{"origin":14053,"position":5},"title":"Font Stacks","date":"June 13, 2010","format":false,"excerpt":"\/* Times New Roman-based stack *\/ font-family: Cambria, \"Hoefler Text\", Utopia, \"Liberation Serif\", \"Nimbus Roman No9 L Regular\", Times, \"Times New Roman\", serif; \/* Modern Georgia-based serif stack *\/ font-family: Constantia, \"Lucida Bright\", Lucidabright, \"Lucida Serif\", Lucida, \"DejaVu Serif\", \"Bitstream Vera Serif\", \"Liberation Serif\", Georgia, serif; \/* Traditional Garamond-based serif\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14053"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14053"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14053\/revisions"}],"predecessor-version":[{"id":373700,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14053\/revisions\/373700"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14053"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}