Documentation
Подключение к Webflow
Exclusive Cyrillic for digital design — integrate TypeLab variable fonts into your Webflow projects in five minutes.
Start Integration1. Upload Fonts to Your Webflow Project
Add your licensed TypeLab font files directly through the Webflow Style Panel. This method keeps everything inside Webflow's native asset manager and requires no external dependencies.
Step 1
Download Your Font Package
From your TypeLab dashboard, open the license for your selected family — for example, Kontrakt Variable or Yastreb Display — and click "Download for Web." You will receive a ZIP containing .woff2 and .woff files for each weight and axis.
Step 2
Open Custom Code Settings
In your Webflow Designer, go to Project Settings → Custom Code → Head Code. Alternatively, use the Asset Manager under Settings → Assets to upload your .woff2 files directly.
Step 3
Register @font-face Declarations
Paste the @font-face block provided in your license email into the Head Code area. Each family comes with pre-written declarations covering weights 100–900 and the Cyrillic Unicode range U+0400-04FF.
Step 4
Assign in the Style Panel
Select any text element, open the Style Panel, and type your font name — e.g. "Kontrakt" — in the Font family dropdown. Webflow will list it alongside system fonts. Set the desired weight, size, and letter-spacing.
2. Variable Fonts & CSS Custom Properties
TypeLab's variable fonts expose axes for weight, width, and optical size. Use CSS custom properties to control them dynamically across breakpoints and interactive states.
Add the following block to Project Settings → Custom Code → Before </body> tag or to a dedicated custom code embed on the page:
The snippet above defines --font-weight, --font-width, and --font-optical-size as custom properties. Reference them in your text styles using font-variation-settings: "wght" var(--font-weight), "wdth" var(--font-width). This approach lets you animate weight transitions with CSS transitions or Webflow interactions without switching to static font files.
For Kontrakt Variable, the supported axes are: wght (100–900), wdth (75–125), and opsz (8–72). For Yastreb Display, axes are wght (300–800) and slnt (0 to −10°). Check your license page for the exact axis ranges of your family.
3. Responsive Typography Configuration
Set fluid type scales so your Cyrillic headings and body copy remain legible from mobile to ultrawide. Webflow's breakpoint system pairs naturally with TypeLab's optical-sizing axis.
At each breakpoint (Mobile Portrait, Tablet, Desktop), adjust the following in the Style Panel:
Desktop (≥992px): Heading H1 at 72px / 80px line-height, weight 700, letter-spacing −1.5%. Body text at 18px / 28px, weight 400. Enable optical sizing by setting font-optical-sizing: auto in custom CSS.
Tablet (768–991px): Reduce H1 to 56px / 64px. Body text at 16px / 26px. Tighten letter-spacing on headings to −1% for compact Cyrillic glyph clusters.
Mobile (≤767px): H1 at 40px / 48px, weight 600. Body text at 15px / 24px. Increase line-height on paragraphs to 1.6 for improved Cyrillic readability on small screens.
Use Webflow's Fluid Typography feature (Settings → Site Settings → Typography) to set minimum and maximum font sizes for each type style. This ensures smooth interpolation between breakpoints without manual overrides.
4. Pro Tips for Production
Lessons learned from deploying TypeLab fonts across 240+ Webflow projects for agencies in Moscow, Berlin, and Tel Aviv.
Performance
Preload Critical Weights
Add <link rel="preload" href="/fonts/kontrakt-var.woff2" as="font" crossorigin> to your Head Code for the weight you use on hero text. This eliminates the first-paint flash on Cyrillic-heavy landing pages.
Cyrillic Rendering
Set font-display: swap
Always include font-display: swap in your @font-face declarations. Cyrillic glyph sets are larger than Latin-only fonts; swap prevents invisible text during the 200–400ms download window on 3G connections.
Interactions
Animate Weight, Not Font Family
When building hover states or scroll-triggered effects, animate font-variation-settings rather than swapping between static weights. A transition from wght 400 to 700 on Kontrakt Variable takes 300ms and looks butter-smooth in Webflow's interaction designer.
Licensing
One License Per Published URL
Your TypeLab web license covers one published Webflow domain. If you maintain a staging URL and a production URL, request a dual-site add-on from your dashboard — it costs 25% of the base license fee.