Font Properties
p {
font-family: "Hind Siliguli", Arial, sans-serif;
font-size: 16px;
font-weight: 400; /* 100-900, normal, bold */
font-style: italic; /* normal, italic, oblique */
font-variant: small-caps;
line-height: 1.6; /* unitless recommended */
letter-spacing: 0.5px;
word-spacing: 2px;
text-transform: uppercase; /* lowercase, capitalize */
text-align: center; /* left, right, justify */
text-decoration: underline; /* none, line-through, overline */
text-indent: 30px; /* প্যারা ইন্ডেন্ট */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
white-space: nowrap; /* normal, pre, pre-wrap */
word-wrap: break-word;
}
/* সংক্ষিপ্ত */
font: italic bold 16px/1.6 Arial, sans-serif;
Font Size Units
px — fixed pixel (16px)em — parent এর relative (1.5em = parent × 1.5)rem — root (<html>) এর relative — সবচেয়ে সুপারিশকৃত% — parent এর শতাংশvw, vh — viewport width/height এর শতাংশclamp(min, preferred, max) — responsive font size
html { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px */
h2 { font-size: 1.5rem; } /* 24px */
p { font-size: 1rem; } /* 16px */
/* Fluid responsive */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
Google Fonts (বাংলা/ইংরেজি)
<!-- HTML head -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
/* CSS */
body {
font-family: "Hind Siliguri", "Roboto", sans-serif;
}
Custom Font (@font-face)
@font-face {
font-family: "MyFont";
src: url("fonts/myfont.woff2") format("woff2"),
url("fonts/myfont.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body { font-family: "MyFont", sans-serif; }