{"id":22064,"date":"2013-06-17T19:24:14","date_gmt":"2013-06-18T02:24:14","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=22064"},"modified":"2015-05-15T09:22:18","modified_gmt":"2015-05-15T16:22:18","slug":"font-family","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-family\/","title":{"rendered":"font-family"},"content":{"rendered":"<p>The <code>font-family<\/code> property defines the font that is applied to the selected element. The font that is selected is not a single font face, but a &#8220;family&#8221;, and thus may be dependent on other typographic property values to select the correct face within the family.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">body {\r\n    font-family: Arial, Helvetica, sans-serif;\r\n}<\/code><\/pre>\n<p>A value can be one of the following:<\/p>\n<ul>\n<li>A font family name that matches a font that is embedded on the page or available on the user&#8217;s system.<\/li>\n<li>A series of family names, separated by commas, which can include a generic family name<\/li>\n<\/ul>\n<p>If multiple family names are used, the browser will select the first one it finds either embedded on the page using <code>@font-face<\/code> or installed on the user&#8217;s operating system.<\/p>\n<p>For <code>font-family<\/code> there is no specific default or initial value; the initial value always depends on the browser and\/or operating system.<\/p>\n<h3>Generic Family Names<\/h3>\n<p>If multiple values are used for a single declaration, it is recommended to have a <a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#generic-font-families\" rel=\"noopener\">generic family<\/a> listed last as a fallback to ensure the best typographic experience:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">code {\r\n    font-family: Courier, Monaco, monospace;\r\n}<\/code><\/pre>\n<p>In the above example, &#8220;Courier&#8221; and &#8220;Monaco&#8221; are real family names of actual fonts, whereas &#8220;monospace&#8221; is just a generic reference to any font installed on the user&#8217;s system that&#8217;s monospaced.<\/p>\n<p>If the first two are not found installed, the browser will select the best option, but only from monospace fonts. Without the generic family, the font would default to whatever is the default font on the user&#8217;s system (likely a serif or sans-serif), which would be undesirable.<\/p>\n<p>Generic family names include <code>serif<\/code>, <code>sans-serif<\/code>, <code>cursive<\/code>,  <code>fantasy<\/code>, and  <code>monospace<\/code>.<\/p>\n<p>If a family name matches a generic family name, the family name should be quoted to indicate that it is not generic.<\/p>\n<h3>Multi-word Family Names<\/h3>\n<p>If a family name contains multiple words, separated by spaces, it is recommended to list the family name in quotation marks (single or double):<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">code {\r\n    font-family: \"Times New Roman\", Georgia, serif;\r\n}<\/code><\/pre>\n<p>This isn&#8217;t always necessary, but it is generally safer to include the quotes for any family name that has spaces or special characters.<\/p>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/\">font<\/a><\/li>\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<\/ul>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#font-family-prop\" rel=\"noopener\">font-family on W3C<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-family\" rel=\"noopener\">font-family on MDN<\/a><\/li>\n<li><a href=\"http:\/\/mothereff.in\/font-family\" rel=\"noopener\">Unquoted CSS font family name validator<\/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\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The font-family property defines the font that is applied to the selected element. The font that is selected is not a single font face, but a &#8220;family&#8221;, and thus may be dependent on other typographic property values to select the correct face within the family. body { font-family: Arial, Helvetica, sans-serif; } A value can [&hellip;]<\/p>\n","protected":false},"author":7178,"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":253584,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/","url_meta":{"origin":22064,"position":0},"title":"font-display","date":"April 17, 2017","format":false,"excerpt":"The font-display property defines how font files are loaded and displayed by the browser. It is applied to the @font-face rule which defines custom fonts in a stylesheet. @font-face { font-family: 'MyWebFont'; \/* Define the custom font name *\/ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); \/* Define where the font can\u2026","rel":"","context":"In \"font-display\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22040,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-style\/","url_meta":{"origin":22064,"position":1},"title":"font-style","date":"June 17, 2013","format":false,"excerpt":"The font-style property allows you to make text appear italicized (i.e. sloped, or slanted). em { font-style: italic; } This property accepts one of three possible values: normal, italic, and oblique. If a given font family has an italic or oblique face embedded, the browser will select that face. If\u2026","rel":"","context":"With 9 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":22064,"position":2},"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":14053,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/","url_meta":{"origin":22064,"position":3},"title":"font","date":"September 5, 2011","format":false,"excerpt":"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\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249514,"url":"https:\/\/css-tricks.com\/snippets\/css\/system-font-stack\/","url_meta":{"origin":22064,"position":4},"title":"System Font Stack","date":"January 3, 2017","format":false,"excerpt":"Defaulting to the system font of a particular operating system can boost performance because the browser doesn't have to download any font files, it's using one it already had. That's true of any \"web safe\" font, though. The beauty of \"system\" fonts is that it matches what the current OS\u2026","rel":"","context":"In \"font-face\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":235583,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-feature-settings\/","url_meta":{"origin":22064,"position":5},"title":"font-feature-settings","date":"December 4, 2015","format":false,"excerpt":"This property gives us control over advanced typographic settings such as small caps, ligatures, and swashes. To activate them you must declare which value you need in quotes and then followed by either 1 or on to enable. Alternatively, you can disable them with either 0 or off: .element {\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22064"}],"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\/7178"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=22064"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22064\/revisions"}],"predecessor-version":[{"id":202373,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22064\/revisions\/202373"}],"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=22064"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=22064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}