{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-font-family/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"9f6fb43b-da63-543b-8f6b-bb03502da5a2","title":"Tailwind Font Family","slug":"/classes/tailwind-font-family/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"1 May 2024\",\n  \"title\": \"Tailwind Font Family\",\n  \"metaTitle\": \"Tailwind CSS Font Family\",\n  \"metaDescription\": \"The tailwind font family utility class allows you to easily specify the font family for text elements.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-font-family\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Font Family\"), mdx(\"p\", null, \"The Tailwind font family utility class allows you to easily specify the font family for text elements. With Tailwind's font family classes, you can quickly apply different font families to your text without writing custom CSS.\"), mdx(\"h2\", null, \"Applying Tailwind Font Family\"), mdx(\"p\", null, \"To apply a tailwind font family to an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-{family}\"), \" utility class, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{family}\"), \" represents the desired font family. Tailwind CSS provides a set of default font families that you can use out of the box.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\" font-sans....\\\">\\n  This text has the sans-serif font family.\\n</div>\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-yellow-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"text-center text-yellow-600 font-extrabold font-sans text-3xl\"\n  }, \"This text has the sans-serif font family.\")), \"---\", mdx(\"p\", null, \"In the above example, the font-sans class is applied to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element, setting its font family to a sans-serif font.\"), mdx(\"h3\", null, \"Serif\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\" font-serif...\\\">\\n  This text has the serif font family.\\n</div>\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-blue-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"text-center text-blue-600 font-extrabold font-serif text-3xl\"\n  }, \"This text has the serif font family.\")), \"---\", mdx(\"h2\", null, \"Default Tailwind Font Families\"), mdx(\"p\", null, \"Tailwind CSS includes a set of default font families that you can use. Some of the commonly used ones include:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-sans\"), \": Sets the font family to a sans-serif typeface.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-serif\"), \": Sets the font family to a serif typeface.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-mono\"), \": Sets the font family to a monospaced typeface.\"))), mdx(\"p\", null, \"You can choose the font family that best suits your design and apply the corresponding utility class to your elements.\"), mdx(\"h2\", null, \"Custom Tailwind Font Family\"), mdx(\"p\", null, \"Tailwind CSS also allows you to define your own custom font families in the configuration file. Once defined, you can use your custom font families with the font-\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{family}\"), \"utility class. Here's an example of using a custom font family:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"font-custom\\\">\\n  This text has a custom font family.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, a custom font family called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"custom\"), \" is defined in the Tailwind CSS configuration file. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-custom\"), \" class is applied to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element, setting its font family to the defined custom font family.\"), mdx(\"h2\", null, \"Responsive Tailwind Font Family\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply font families responsively at different breakpoints. To use responsive tailwind font family classes, you can append the breakpoint prefix to the font family class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:font-serif\"), \" applies the serif font family starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"font-sans md:font-serif\\\">\\n  This text uses the sans-serif font family by default, but switches to serif starting from the\\n  medium breakpoint.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the font-sans class is applied by default, setting the font family to a sans-serif typeface. However, starting from the medium breakpoint and above \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(md:font-serif)\"), \", the font family changes to a serif typeface.\"), mdx(\"h2\", null, \"Tailwind Font Family Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-sans\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", Roboto,\", mdx(\"br\", null), \" \\\"Helvetica Neue\\\", Arial, \\\"Noto Sans\\\", sans-serif, \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-serif\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-family: ui-serif, Georgia, Cambria, \\\"Times New Roman\\\", Times, serif;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-mono\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=header17\"\n  }, \"Landing page\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-font-family","title":"Tailwind Font Family","items":[{"url":"#applying-tailwind-font-family","title":"Applying Tailwind Font Family","items":[{"url":"#preview","title":"Preview"},{"url":"#serif","title":"Serif"},{"url":"#preview-1","title":"Preview"}]},{"url":"#default-tailwind-font-families","title":"Default Tailwind Font Families"},{"url":"#custom-tailwind-font-family","title":"Custom Tailwind Font Family"},{"url":"#responsive-tailwind-font-family","title":"Responsive Tailwind Font Family"},{"url":"#tailwind-font-family-class-table","title":"Tailwind Font Family Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-font-family.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Font Family","lastUpdated":"1 May 2024","metaDescription":"The tailwind font family utility class allows you to easily specify the font family for text elements."}}},"pageContext":{"id":"9f6fb43b-da63-543b-8f6b-bb03502da5a2"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}