University
Log in
Search
⌘E
My learning
Try Webflow — it's free
Learn
Courses
Learning Paths
Videos
Docs
Resources
Certifications
Interactive Learning
Glossary
The Webflow Way
Engage
Support
Community
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
Variable font

Variable font

A variable font is a single font file that contains a whole range of weights, widths, or styles, instead of a separate file for each one. Rather than loading a regular, bold, and semibold weight separately, a variable font lets you dial in any weight along that spectrum from one file.

That flexibility makes variable fonts lighter on page load, since there are fewer files to download, and gives designers finer control over typography, since you're not locked into a handful of preset weights. In Webflow, you can upload a variable font the same way you'd upload any custom font.

Relevant courses

A glowing AI sparkle icon within a deconstructed pink neon box

AI guardrails for teams

Manage team AI access, understand the reach of AI-assisted changes, and review what changed before your site goes live.

Collaborate with your team

Learn how to set up roles, permissions, and workflows in Webflow so your entire team can work together safely, confidently, and efficiently.

Design & manage CMS content in Webflow

Learn how to create, manage, and style dynamic content and collections on your site using Webflow’s CMS.

Webflow 101

Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.
Comment cursor hovering over a text box

Webflow for Reviewers

Learn how to review and give feedback with confidence in Webflow.
Publishing rocket icon flying through glass

Webflow for Marketers

Learn how to build, edit, and publish with confidence in Webflow.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Idempotent

→
Idempotency is a computing principle where multiple applications of a function or operation produce the same result as a single execution.

Plugin

→
A plugin, also called an add-on or extension, is a software component that enhances the host or browser or application by adding new features or capabilities to it.

Registrar

→
A registrar, or domain name server (DNS) registrar, manages the sale of domain names and the assignment of IP addresses, ensuring each domain’s uniqueness.

End user

→
An end user is an individual or group who directly interacts with a particular product, service, or user interface (UI), such as a website or application.

Smoke test

→
A smoke test, also called build verification testing or confidence testing, is a preliminary examination to determine the basic functionality of a software, website, or application.

Urgency

→
Urgency is a marketing term and psychological trigger that incites potential customers and website visitors to act swiftly.

Certificate authority

→
A certificate authority (CA), also known as a certification authority, issues digital certificates that verify a website’s owner.

Width

→
Width defines how wide an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Paragraph

→
A typography element used for displaying multi-sentence text content.

Ancestor

→
Any element that is further up the element hierarchy of the document tree. For example, the Body element is the ancestor of all elements on the Designer canvas.

Flex-basis

→
Flex-basis is a CSS property used in flexboxes that sets the initial size of a flex item before it grows or shrinks.

Closing tag

→
A closing tag is an instructional piece of code that ends a section of page content in HTML.

Client-side

→
Client-side is the user-facing part of a web app, responsible for processing user input and displaying content.

Top margin

→
Top margin is a CSS property that defines the space between the top edge of an element and its surroundings, such as other elements, the browser window, or the edge of a container.

Mobile (portrait) breakpoint

→
A Webflow canvas setting that lets you create styles for viewports with a minimum width of 240px and a maximum width of 479px. Also known as the mobile portrait media query.

Embed component

→
A Webflow component you can use to embed HTML to display external content, plugins, or applications.

Slug

→
A slug, also known as a URL slug or a website slug, is descriptive text that appears at the end of a URL and identifies a web page.

Field label

→
A field label is descriptive text that helps users understand what information to enter in an input field on a web form.

Footer code

→
Footer code creates a section at the bottom of every web page that displays important information like disclaimers, copyright or contact information, and links to related documents.

Web Accessibility Initiative (WAI)

→
The Web Accessibility Initiative (WAI) is a World Wide Web Consortium (W3C) project to enhance accessibility for users with disabilities.

Image field

→
Available in CMS Collections. With this field, you can upload images from your computer and use them as dynamic items in your individual Collection item.

Semantics

→
Semantics accurately represent the structure and purpose of content in computer languages, enabling web developers and programmers to ensure the written code produces an output legible to humans and machines.

Last updated

→
The last time someone made a change to your site.

Top padding

→
The inside spacing between the top border of an element and the elements inside it.

Dynamic content

→
Content you create once, then publish in many different places across your website. As you update this content in the CMS, it automatically updates wherever it exists on your site, making it convenient to create and manage larger websites.

Redo

→
To move forward one step while making changes to a Webflow site.

Media query

→
A media query is a CSS technique that applies different styles to a website or an app based on the characteristics of the device displaying it, such as screen size, resolution, and browser viewport.

Closed-loop marketing

→
Closed-loop marketing is an ecommerce marketing strategy that uses customer data to create and improve targeted content.

Bottom margin

→
The spacing between the bottom border of an element and the element(s) below it.

Selector

→
A selector identifies and selects specific HTML elements to apply CSS styles to.

Array

→
An array is an ordered, random-access collection of data. This data can be either primitive or object, depending on the coding language.

Static content

→
Static content is content that’s not bound to any Collections or dynamic elements.

Attribute

→
An attribute in HTML is a term inside an opening tag of an element, such as a font or color, that provides additional information about the element.

Input field

→
An HTML input field, represented by the syntax <input>, is a web page element where users input data, like text and numbers.

Widget

→
A widget is an interactive element embedded in a user interface that facilitates specific user actions or displays important information at a glance.

Dither

→
Dithering is a design technique that simulates additional colors on a display to smooth transitions in images with limited color palettes.

Page settings

→
You can manage your site pages within Page settings. Here, you can rename, duplicate, delete, or save pages as drafts. You can also set SEO, Open Graph, and site search settings, as well as insert custom code. Additionally, you can set RSS settings for Collection pages.

Folder

→
A folder is a subdirectory of your site's root folder for organizing web pages.

Language code

→
A language code is a standardized code of letters and numbers that represent different languages.

Borders

→
The CSS border property delineates an HTML element.

Switch field

→
Available in CMS Collections. This field offers you a powerful filtering tool for Collection items. For example, you could create a switch labeled "Featured?" for Blog Posts, and then switch on the toggle to showcase particular posts.

Lightbox

→
A lightbox displays content in a popup or modal window on top of a web page’s main content.

Alt text

→
Alt text, short for alternative text, refers to text that describes online images.

Footer

→
A footer is a section at the bottom of a web page.

Fold

→
The fold distinguishes the visible portion of the webpage immediately visible to users without scrolling from the remaining content viewable by scrolling down.

Rich text element

→
Allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually.

Collection

→
A content type (blog posts, recipes, etc.) represented by a group of fields you define. Once created, you can add individual Collection items.

Bug

→
A bug is an error, fault, or flaw in an application or software that causes the program to behave unexpectedly, often producing inaccurate and invalid output.

Mobile (landscape) breakpoint

→
A Webflow canvas setting that lets you create styles for viewports with a minimum width of 480px and a maximum width of 767px. Also known as the mobile landscape media query.

Unbranded form submission notification

→
Form submission notifications that have no reference to Webflow (e.g., notifications sent from “[email protected]” instead of “[email protected]”).

Strong text

→
The&nbsp;&lt;strong&gt;&nbsp;element defines important text with added semantic&nbsp;importance.

Zapier

→
A web app that helps you connect multiple third-party services together based on triggers and actions.

Left padding

→
Left padding is a CSS property that defines the space between an element's left border and its content.

Padding

→
Padding is a CSS property defining the space between an element's borders and its content.

Display: inline-block

→
The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts.

Username

→
The ID used to log into your Webflow account.

Form submission

→
When someone sends data through one of your site's forms.

Node title

→
The type of element you're working with, i.e., H1, link, button, etc.

Keyboard shortcuts

→
Keyboard shortcuts are combinations of keys on a computer keyboard that perform a specific action or command within an application or operating system.

Position section

→
A section in the Style panel that houses CSS properties related to the positioning of an element.

Variable font

→
A variable font is a single font file that contains multiple weights, widths, or styles, letting you adjust typography continuously instead of loading a separate file for each variant.

Container

→
An element that contains content.

Translation inheritance

→
Translation inheritance is when a secondary locale automatically mirrors the primary locale's content until a specific field is manually translated, at which point that field stops inheriting further changes.

Password protection

→
Password protection is a security feature restricting certain website areas to authorized users, requiring a secret phrase or key to access them.

BiDi

→
BiDi stands for bidirectional. When a document is BiDi, it supports text that reads from right to left and left to right.

Cryptographic hash function

→
A cryptographic hash function takes an input message of any length, such as a file, message, or password, and uses a mathematical formula to produce a fixed-size output (hash).

Layout section

→
A tab in the Add panel that houses prebuilt layouts for your Webflow site.

Shim

→
A shim is a code snippet enabling modern web features to function within older programming or browsing environments.

Cryptanalysis

→
Cryptanalysis examines cryptographic systems to find weaknesses that could allow attackers to uncover plaintext or break encryption.

Flex-shrink

→
The flex-shrink CSS property defines how much an element shrinks relative to other flexible items inside the same parent element.

Email template

→
Email templates — or pre-designed HTML layouts — ensure consistent branding and visual aesthetic in marketing campaigns.

Read-only link

→
A way for others to test/debug your Webflow site in the Designer without being able to save or make permanent changes.

Total Site Pages

→
The amount of pages your site currently has.

Deep copy

→
In programming, a deep copy is a replica of an object that doesn’t share the same references as the original. That way, if you make changes to the duplicate, the original stays the same.

Key

→
A key, or web key, is a unique identifier that authorizes access to a webpage or service.

Clickjacking

→
Clickjacking is when a malicious actor deceives website visitors into clicking buttons or links hidden in a fake layer to steal sensitive data or install malware.

Multi-reference field

→
A CMS field used in Collections. Just like a reference field, the multi-reference field lets you reference other Collections in your site. But it’s even more powerful, as it lets you reference multiple items within a Collection instead of just 1 item.

Custom font

→
A custom font is any non-system-default typeface you manually upload to your website.

Ligature

→
A ligature in typography groups adjacent letters or characters into one glyph.

Header

→
A header is a section at the top of a webpage.

Link block

→
A link block operates much like a div block, an HTML element for grouping and organizing other HTML elements (like text, images, and forms) into block-level containers. But in the case of a link block, what’s inside the block becomes a link.

Network Address Translation (NAT)

→
NAT (Network Address Translation) is a technique that enables communication between devices with private internet protocol addresses and the public internet.

Cascading rules

→
The order in which a Webflow site's CSS styles flow from desktop to mobile breakpoints.

CMS Collection page

→
A dynamic page that Webflow automatically creates for each Collection item. When you design a Collection page, all the pages that are created for each Collection item will have the same template but different content.

JPEG

→
Short for Joint Photographic Experts Group, JPEG is a file format that uses lossy compression to maintain manageable file sizes without compromising image quality.

Real-Time Streaming Protocol (RTSP)

→
Real-Time Streaming Protocol (RTSP) is a standardized network protocol for transmitting real-time multimedia data like audio and video.

File Transfer Protocol (FTP)

→
File Transfer Protocol (FTP) allows for the transfer of files between two parties over TCP/IP-based communication channels, such as the internet.

Color field

→
A color field specifies a graphical color picker or user interface for entering a color into a text field in a seven-character, hexadecimal format.

Radio button

→
A radio button is a form element for selecting one option from a predefined set of mutually exclusive choices.

Responsive design

→
Responsive web design (RWD) is a web development and design approach to create websites, applications, and user interfaces (UIs) that display and function effectively on any device or screen size.

JSON

→
JSON, short for JavaScript Object Notation, is a human-readable, lightweight format for recording, storing, and exchanging data.

Facebook button

→
A Facebook button is a clickable element on a website that allows users to connect to or share content on the social media platform.

Checkbox

→
Checkboxes are HTML structures that allow visitors to input data.

Columns

→
Columns let you create sections of content that sit side by side on your website, like the columns in newspapers. You can choose how many columns you want and their widths. You can also control how they display on smaller screens — such as stacking them.

Flex-justify

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the main axis of the flex container — that is, whatever you defined as the flex-direction. Options include start, center, end, baseline, and stretch.

Certified

→
A digital certificate is a data file embedded in the site that signals the site’s safety to visitors, internet service providers (ISPs), and servers.

Ciphertext

→
Ciphertext is unreadable, encrypted data that ciphers use for security during data transit.

Duplicate element

→
To copy an element and&nbsp;its content, styles, and settings.

Descendant selector

→
A descendant selector is a CSS (Cascading Style Sheets) selector that targets elements nested inside a parent element.

Workspace plan

→
A Webflow plan that applies to your entire Workspace.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more