Integration with Websites
Connect TypeLab fonts to any project in minutes — from raw CSS to CMS platforms
HTML & CSS
Embed fonts directly with @font-face
Every TypeLab font family ships with a ready-to-use CSS snippet. Drop it into your stylesheet and the fonts render across all modern browsers with full Cyrillic coverage.
After purchasing a web license, you receive a ZIP archive containing .woff2 files for each weight and a typelab-font.css file with pre-written @font-face rules. Link the CSS in your <head>, then assign the font to any element via font-family. For example, the Metropolis Grotesk family includes Regular, Medium, Bold, and Black weights — each under 48 KB in woff2, with a full Cyrillic subset baked in.
Typical setup takes under two minutes. The CSS points to font files hosted on your own domain, so you retain full control over caching, CDN distribution, and GDPR compliance. No third-party requests, no external dependencies.
WordPress
Install TypeLab fonts with the Use Any Font plugin
The free Use Any Font plugin (by WPZoom) is the most reliable way to upload custom web fonts into WordPress. It works with every theme — GeneratePress, Astra, Kadence, Blocksy — and with the Full Site Editor in WordPress 6.4+.
Upload the .woff2 files from your TypeLab package through the plugin's dashboard, assign each weight its proper font-weight declaration (400, 500, 700, 900), and the font becomes available in the block editor and customizer. To activate font-display: swap for zero layout-shift, add a single line to your theme's functions.php or use the Code Snippets plugin.
For sites running Elementor, the same uploaded fonts appear in Elementor's typography panel under the "Custom" group. For Gutenberg users, the font registers as a preset in the block settings sidebar, so you can apply it to headings, paragraphs, and group blocks without touching CSS.
Webflow
Add TypeLab fonts to your Webflow project
Webflow's built-in custom font manager accepts .woff2 files directly. Upload each weight once at the project level, then assign the font globally in the Site Styles panel.
Navigate to Project Settings → Custom Code → Fonts and upload the woff2 files from your TypeLab package. Name each upload clearly — for instance, "Sovetskaya Display Regular 400" — so you can distinguish weights later. After uploading, go to Design → Site Styles and set your new font as the default for H1, H2, Body, or any custom class.
Webflow automatically serves uploaded fonts through its CDN, which means fast delivery without configuration. Keep in mind that Webflow's font limit per project is 20; if you're using a large TypeLab family with 8+ weights, consider uploading only the weights you actually use to stay within the cap.
Performance
Optimize font loading for speed and clarity
Custom fonts add weight to your page. With the right strategy, TypeLab families load in under 200 ms and never block text from appearing.
Use font-display: swap
Every @font-face rule in TypeLab's CSS includes font-display: swap by default. This tells the browser to show fallback text immediately and swap in the custom font once it downloads — eliminating invisible text flash and improving Largest Contentful Paint by up to 300 ms on 3G connections.
Preload critical weights
Add a <link rel="preload" href="/fonts/metropolis-bold.woff2" as="font" crossorigin> tag for the weight used in your hero heading. Preloading cuts the time-to-display for that font to under 120 ms on a typical broadband connection, because the browser starts fetching it before parsing the CSS.
Subset to your content
If your site uses only a portion of the Cyrillic alphabet — for example, Russian and Ukrainian characters but not Serbian or Macedonian — ask TypeLab to generate a custom subset. A fully subsetted Metropolis Grotesk Regular drops from 46 KB to 22 KB, nearly halving the download without losing any glyphs your visitors need.
Cache with long headers
Set Cache-Control: public, max-age=31536000, immutable on all .woff2 files. Font files rarely change between releases, so a one-year cache header means returning visitors load fonts from disk, not the network. Version the filename (e.g., metropolis-v2.1.woff2) if you ever update the family.
Avoid font-weight mismatches
Declare exactly the weights you upload. If you provide 400 and 700 only, don't reference font-weight: 500 in CSS — the browser will synthesize a faux-medium that looks blurry on Cyrillic descenders. Define CSS utility classes like .font-regular and .font-bold to keep your design system consistent.
Measure with Lighthouse
Run a Lighthouse audit after integrating your fonts. Target a Font Display score of 100 and keep cumulative font download time under 500 ms. TypeLab's woff2 files are already optimized with Brotli compression at level 11, so you're starting from a strong baseline — most clients report CLS under 0.02 after following these steps.
Need help?
We'll integrate the fonts for you
Not comfortable touching CSS or plugin settings? Our team can embed any TypeLab family into your live site — WordPress, Webflow, Shopify, or custom code — during a 30-minute remote session.
Book a session through the contact form, and we'll handle font upload, weight mapping, and performance tuning. The service costs 2,500 ₽ per project and includes a written handoff document so your team can manage the fonts going forward.
Book a session
Download integration PDF