Font Family

Typeface.

html

<div class="ff-wrap">
  <p class="ff-text" style="font-family:system-ui, sans-serif;font-weight:400;font-size:20px;">Typeface changes the whole feel</p>
  <p class="ff-caption">font-family: system-ui, sans-serif</p>
</div>
<style>
.ff-wrap { color: #241430; width: 300px; }
.ff-text { margin: 0; line-height: 1.4; }
.ff-caption { margin: 12px 0 0; font: 12px/1.4 system-ui, sans-serif; color: #241430cc; }
</style>

tailwind

<div class="text-[#241430] w-[300px]">
  <p class="m-0 leading-snug" style="font-family:system-ui, sans-serif;font-weight:400;font-size:20px;">Typeface changes the whole feel</p>
  <p class="mt-3 font-sans text-xs text-[#241430]/80">font-family: system-ui, sans-serif</p>
</div>

react

export function FontFamily({
  family = "system-ui, sans-serif",
  weight = "400",
  fontSize = 20,
  text = "Typeface changes the whole feel",
}) {
  return (
    <div style={{ color: "#241430", width: 300 }}>
      <p style={{ margin: 0, lineHeight: 1.4, fontFamily: family, fontWeight: Number(weight), fontSize }}>{text}</p>
      <p style={{ marginTop: 12, font: "12px/1.4 system-ui, sans-serif", color: "#241430cc" }}>font-family: {family}</p>
    </div>
  );
}