Typography
Heading tags follow Bootstrap 5’s default styling out of the box. On top of that, Shock adds a scale of reusable text style classes and wires the fonts through CSS variables — so restyling your type is quick and consistent.
Shock uses two typefaces (from Adobe Typekit) as its primary and secondary fonts, set as CSS variables in
theme.css:
:root {--primary-font: lato, sans-serif;--secondary-font: proxima-nova, sans-serif;}Changing to your own font is a matter of updating these two values (and loading the font in your <head>).
When picking a new family, Google Fonts is a great, free resource.
The 12 text styles
Section titled “The 12 text styles”Shock defines twelve text-style classes in theme.css, from the largest display size down to fine print.
Apply any of them to any text element for consistent sizing across your pages:
<h1 class="text-style-1">Huge display heading</h1><p class="text-style-6">Comfortable body copy</p><span class="text-style-12">Small print</span>| Class | Size | Weight |
|---|---|---|
text-style-1 | 6.2rem | 800 |
text-style-12 | 1.2rem | 400 |
The scale runs from text-style-1 (6.2rem, weight 800) down to text-style-12 (1.2rem, weight
400), giving you a ready-made typographic rhythm without inventing your own sizes.