{"id":235583,"date":"2015-12-04T13:03:46","date_gmt":"2015-12-04T20:03:46","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=235583"},"modified":"2020-07-20T16:11:17","modified_gmt":"2020-07-20T23:11:17","slug":"font-feature-settings","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-feature-settings\/","title":{"rendered":"font-feature-settings"},"content":{"rendered":"\n<p>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 <code>1<\/code> or <code>on<\/code> to enable. Alternatively, you can disable them with either <code>0<\/code> or <code>off<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {  \n  \/* these two values do the same thing *\/\n  font-feature-settings: \"liga\" 1;\n  font-feature-settings: \"liga1\" on;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qbBRmP\" src=\"\/\/codepen.io\/anon\/embed\/qbBRmP?height=450&amp;theme-id=1&amp;slug-hash=qbBRmP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qbBRmP\" title=\"CodePen Embed qbBRmP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Many other values, besides standard ligatures are supported by the <code>font-feature-settings<\/code> property, including small caps:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  font-feature-settings: \"smcp\" 1; \n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PZoWeg\" src=\"\/\/codepen.io\/anon\/embed\/PZoWeg?height=450&amp;theme-id=1&amp;slug-hash=PZoWeg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PZoWeg\" title=\"CodePen Embed PZoWeg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p>This is a list of every value that is supported by <code>font-feature-settings<\/code>, but make sure to check the web font that you\u2019re using supports these values too before trying them:<\/p>\n\n\n\n<ul><li><code>liga<\/code>: standard ligatures<\/li><li><code>dlig<\/code>: discretionary ligatures<\/li><li><code>onum<\/code>: old style figures<\/li><li><code>lnum<\/code>: lining figures<\/li><li><code>tnum<\/code>: tabular figures<\/li><li><code>zero<\/code>: slashed zero<\/li><li><code>frac<\/code>: fractions<\/li><li><code>sups<\/code>: superscript<\/li><li><code>subs<\/code>: subscript<\/li><li><code>smcp<\/code>: small caps<\/li><li><code>c2sc<\/code>: small capitals from capitals<\/li><li><code>case<\/code>: case-sensitive forms<\/li><li><code>hlig<\/code>: historical ligatures<\/li><li><code>calt<\/code>: contextual alternates<\/li><li><code>swsh<\/code>: swashes<\/li><li><code>hist<\/code>: historical forms<\/li><li><code>ss**<\/code>: stylistic sets<\/li><li><code>kern<\/code>: kerning<\/li><li><code>locl<\/code>: localized forms<\/li><li><code>rlig<\/code>: required ligatures<\/li><li><code>medi<\/code>: medial forms<\/li><li><code>init<\/code>: initial forms<\/li><li><code>isol<\/code>: isolated forms<\/li><li><code>fina<\/code>: final forms<\/li><li><code>mark<\/code>: mark<\/li><li><code>mkmk<\/code> mark-to-mark positioning<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"combining-multiple-settings\">Combining multiple settings<\/h3>\n\n\n<p>To add multiple features you need to follow one value by another in a comma separated list, like so:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  font-feature-settings:\"smcp\" 1, \"onum\" 1;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"prefixes\">Prefixes<\/h3>\n\n\n<p>To get the best support across the browser spectrum, make sure to use these prefixes:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  -webkit-font-feature-settings: \"smcp\" 1;\n  -moz-font-feature-settings:    \"smcp\" 1;\n  -ms-font-feature-settings:     \"smcp\" 1;\n  font-feature-settings:         \"smcp\" 1;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=font-feature\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">21*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">15*<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">9.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4.4*<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">9.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li>Typotheque: <a href=\"https:\/\/www.typotheque.com\/articles\/opentype_features_in_web_browsers_-_tests\" rel=\"noopener\">OpenType features in web browsers \u2014 Tests<\/a><\/li><li><a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#propdef-font-feature-settings\" rel=\"noopener\">W3C<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/CSS\/font-feature-settings\" rel=\"noopener\">MDN<\/a><\/li><li><a href=\"http:\/\/clagnut.com\/sandbox\/css3\/\" rel=\"noopener\">Richard Rutter\u2019s CSS3 Sandbox<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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: Many other values, besides standard ligatures are [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"closed","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":261983,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant-numeric\/","url_meta":{"origin":235583,"position":0},"title":"font-variant-numeric","date":"October 31, 2017","format":false,"excerpt":"The font-variant-numeric property in CSS supports the OpenType font format by specifying which numeric glyphs to use on a class, including variations for fractions, ordinal markers and styled variations among others. A Little Context We tend to think of numbers as a static glyph. It prints and that's the way\u2026","rel":"","context":"In \"font-variant\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322735,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-optical-sizing\/","url_meta":{"origin":235583,"position":1},"title":"font-optical-sizing","date":"October 7, 2020","format":false,"excerpt":"The font-optical-sizing CSS property allows the browser to adjust the outline of font glyphs to make them more legible at different sizes. For example, smaller text may get a thicker outline to increase its contrast. On the flip side, larger text may get something that's more \"delicate\" to quote the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376820,"url":"https:\/\/css-tricks.com\/defining-global-settings\/","url_meta":{"origin":235583,"position":2},"title":"Defining Global Settings","date":"January 31, 2023","format":false,"excerpt":"Let's take what we learned about the theme.json structure in WordPress block themes and apply it to two main sections of the file: settings and styles. These arrays are the \u201ctop level\u201d for configuring WordPress features and the theme\u2019s CSS output.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376823,"url":"https:\/\/css-tricks.com\/defining-global-styles-in-wordpress\/","url_meta":{"origin":235583,"position":3},"title":"Defining Global Styles","date":"January 31, 2023","format":false,"excerpt":"Let\u2019s move to the other top-level section of theme.json where we can configure the CSS of a block theme: styles. We\u2019ll learn what it is exactly and how we can use it to override and apply the preset settings values we covered in Part 2.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376849,"url":"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/","url_meta":{"origin":235583,"position":4},"title":"WordPress Global Styles Reference Tables","date":"January 31, 2023","format":false,"excerpt":"We\u2019ve covered a lot of ground in this series. So much so that I thought it would be helpful to condense all the various block theme settings and styles from theme.json into a single page right here.","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1438,"url":"https:\/\/css-tricks.com\/video-screencasts\/26-designing-for-wordpress-part-two\/","url_meta":{"origin":235583,"position":5},"title":"#26: Designing for WordPress: Part Two","date":"December 15, 2008","format":false,"excerpt":"We have WordPress installed, now let's really get our hands dirty and start getting WordPress to do what we want it to do. We start by poking around the backend activating some plugins, changing some settings and creating posts\/pages. Then we take a look at the Photoshop design and note\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\/235583"}],"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\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=235583"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/235583\/revisions"}],"predecessor-version":[{"id":317558,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/235583\/revisions\/317558"}],"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=235583"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=235583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}