Create a text layer and apply a variable font from the Character panel.
Last updated on
Nov 21, 2025
- After Effects User Guide
- Beta releases
- Getting started
- Workspaces
- Projects and compositions
- Importing footage
- Preparing and importing still images
- Importing from After Effects and Adobe Premiere Pro
- Importing and interpreting video and audio
- Preparing and importing 3D image files
- Importing and interpreting footage items
- Import SVG files
- Working with footage items
- Detect edit points using Scene Edit Detection
- XMP metadata
- Text and Graphics
- Text
- Motion Graphics
- Work with Motion Graphics templates in After Effects
- Use expressions to create drop-down lists in Motion Graphics templates
- Work with Essential Properties to create Motion Graphics templates
- Replace images and videos in Motion Graphics templates and Essential Properties
- Animate faster and easier using the Properties panel
- Variable Font Axes
- Drawing, Painting, and Paths
- Overview of shape layers, paths, and vector graphics
- Paint tools: Brush, Clone Stamp, and Eraser
- Taper shape strokes
- Shape attributes, paint operations, and path operations for shape layers
- Use Offset Paths shape effect to alter shapes
- Creating shapes
- Create masks
- Remove objects from your videos with the Content-Aware Fill panel
- Roto Brush and Refine Matte
- Create Nulls for Positional Properties and Paths
- Layers, Markers, and Camera
- Animation, Keyframes, Motion Tracking, and Keying
- Animation
- Keyframe
- Motion tracking
- Keying
- Transparency and Compositing
- Adjusting color
- Effects and Animation Presets
- Effects and animation presets overview
- Effect list
- Effect Manager
- Simulation effects
- Stylize effects
- Audio effects
- Distort effects
- Perspective effects
- Channel effects
- Generate effects
- Time effects
- Transition effects
- The Rolling Shutter Repair effect
- Blur and Sharpen effects
- 3D Channel effects
- Utility effects
- Matte effects
- Noise and Grain effects
- Detail-preserving Upscale effect
- Obsolete effects
- Cycore plugins
- Expressions and Automation
- Expressions
- Expression basics
- Understanding the expression language
- Using expression controls
- Syntax differences between the JavaScript and Legacy ExtendScript expression engines
- Editing expressions
- Expression errors
- Using the Expressions editor
- Use expressions to edit and access text properties
- Expression language reference
- Expression examples
- Automation
- Expressions
- Immersive video, VR, and 3D
- Construct VR environments in After Effects
- Apply immersive video effects
- Compositing tools for VR/360 videos
- Advanced 3D Renderer
- Import and add 3D models to your composition
- Import 3D models from Creative Cloud Libraries
- Create parametric meshes
- Image-Based Lighting
- Animated Environment Lights
- Enable lights to cast shadows
- Extract and animate lights and cameras from 3D models
- Tracking 3D camera movement
- Adjust Default Camera Settings for 3D compositions
- Cast and accept shadows
- Embedded 3D model animations
- Shadow Catcher
- 3D depth data extraction
- Modify materials properties of a 3D layer
- Apply Substance 3D materials
- Work in 3D Design Space
- 3D Transform Gizmos
- Single 3D Gizmo for multiple 3D layers
- Do more with 3D animation
- Preview changes to 3D designs real time with the Mercury 3D engine
- Add responsive design to your graphics
- Views and Previews
- Rendering and Exporting
- Basics of rendering and exporting
- H.264 Encoding in After Effects
- Export an After Effects project as an Adobe Premiere Pro project
- Converting movies
- Multi-frame rendering
- Automated rendering and network rendering
- Rendering and exporting still images and still-image sequences
- Using the GoPro CineForm codec in After Effects
- Working with other applications
- Collaboration: Frame.io, and Team Projects
- Memory, storage, performance
- Knowledge Base
Learn more about working with variable font axes in After Effects, including how to access them, add them as text animators, use selectors, and more.
Use new beta features
Variable Font Axes support is now available for testing and feedback. Try it now in After Effects (beta).
On this page:
Before you begin:
To install a variable font, look for files with extensions such as .ttf, .otf, or .woff2. Many Adobe Fonts include variable versions (marked “Variable”), and you can use the Font Technology filter to locate them quickly. You can also find free variable fonts through resources like Google Fonts and other open-source repositories.
-
-
Select the text layer, then in the Properties panel under the Font & Style section, select the Variable Font icon to open a pop-up displaying all available axes for the current font.
Use the Variable Font icon to display all available axes for the selected font.
Use the Variable Font icon to display all available axes for the selected font. -
The pop-up will display the following for you to adjust the value using the scrubbing control:
- Axis name: Descriptive name. For example, Weight and Width.
- Current value: The current axis value.
Adjust the axis value using the scrubbing control towork with the font’s weight, width, or other variable properties.
Adjust the axis value using the scrubbing control towork with the font’s weight, width, or other variable properties. If you have text selected (in text edit mode), axes show values for the selected characters, and if nothing is selected, the axes show values for the first character. Mixed values across selection will show the range or indicate variation
-
Drag left or right on the value numbers to adjust them, and preview the changes instantly in the Composition panel. Alternatively, you can select the value to enter typing mode, type the desired number, and press Enter to apply.
Each axis has a minimum and maximum value defined by the font, and scrubbing or typing is constrained to valid ranges. You can hover over the hot text to view the range.
Hovering over the hot text shows the minimum and maximum value defined by the font.
Hovering over the hot text shows the minimum and maximum value defined by the font. -
Preview the changes that are reflected immediately in the Composition panel. When the width or spacing changes alter the layout, the text adjusts automatically.
If you want to make the first letter of a word heavier, create weight variations within a single word, or design custom ligatures or character combinations, variable fonts allow you to do so.
-
Double-click the text layer to enter text edit mode.
-
Select specific character(s) you want to modify, and open the Variable Font pop-up in the Properties panel by selecting the icon.
Use the Variable Font icon to display all available axes for the selected font.
Use the Variable Font icon to display all available axes for the selected font. -
Adjust the axis values so that they apply only to selected characters.
NoteIf you do not select a specific character, the values will apply to the first character only.
Text animators allow you to keyframe axis values over time and apply them to specific character ranges using selectors. There are multiple ways to add axis animators.
- Using the Text Layer menu while editing text
- Using Add Animator in the timeline
- Using the Properties panel
Using the Text Layer menu while editing text
-
Double-click the text layer to enter edit mode.
-
Select and highlight characters you want to animate, or select none for all the characters.
-
Right-click on the highlighted text in the Composition panel, then choose Animate Text > Variable Font Axes > [Axis Name].
Highlight text in the Composition panel, and use the Animate Text menu to view available variable font axes.
Highlight text in the Composition panel, and use the Animate Text menu to view available variable font axes. -
A new text animator is created with the selected axis property.
Using Add Animator in the timeline
-
Select the text layer in the Timeline panel, expand the to reveal the Animate button.
-
Select the Animate button, choose Variable Font Axes > [Axis Name].
The Variable Font Axes option under Animate allows you to animate font properties, such as weight or width.
The Variable Font Axes option under Animate allows you to animate font properties, such as weight or width. -
A new animator with range selector is automatically created.
Using the Properties panel
-
Select the text layer in the Timeline panel and navigate to the Properties panel.
-
Go to the Text Animation section and select Add Animator > Variable Font Axes > [Axis Name].
The Add Animator button is selected in the Properties panel to apply animation controls to text properties.
The Add Animator button is selected in the Properties panel to apply animation controls to text properties. -
A new animator with range selector is added.
When a new animator is added, After Effects creates a new Text Animator group that includes the Font Axis property and Range Selector, with the initial value set to the current axis value of the selected characters.
When you add a variable font axis animator, After Effects creates the following hierarchy:
Keyframing Axis Values
-
Move the Current Time Indicator (CTI) to the desired time in the Timeline panel.
-
Select the stopwatch icon next to the axis property to create the first keyframe at the current value.
-
Move the CTI to the new time, and use scrubbing or manual entry to change the value for the axis to create a new keyframe.
Add keyframes for the Font Axis Weight property of the text layer to animate changes in weight over time.
Add keyframes for the Font Axis Weight property of the text layer to animate changes in weight over time.
Animation examples
Try these examples if you are working with individual axes:
|
Example |
Time and value changes |
Result |
|---|---|---|
|
Smooth weight transition |
|
Text gradually gets bolder |
|
Width squeeze effect |
|
Text squeezes in then returns |
|
Slant or Italic Animation |
|
Text leans into italic style |
You can add multiple axis animators to the same text layer by adding the first axis, such as Weight, then the second axis, like Width, and the third axis, like Slant, and keyframing each independently or together. Try the following examples for combining multiple axes:
|
Example |
Time and value changes |
Result |
|---|---|---|
|
Dynamic logo animation |
Animator 1 - Font Axis Weight
Animator 2 - Font Axis Width
|
Text grows bold and wide simultaneously |
The Variable Font Spacing property controls how After Effects adjusts character spacing when animating font axes, such as weight or width.
When you animate font settings, such as weight or width, letters can become wider or narrower. After Effects can automatically adjust the spacing between letters to keep things looking neat, and this setting lets you choose when and how those spacing fixes happen.
-
Expand your text layer's Text property group.
-
Add a Variable Font Axis to animate.
-
Under the More Options section, use the Variable Font Spacing dropdown menu to select from the following:
- Adaptive: Applies per-character tracking compensation when appropriate to maintain natural spacing as font axes change.
- Per-Character: Always applies per-character tracking compensation.
- Default: Disables per-character tracking compensation entirely. Characters maintain their original spacing despite changes to the font axis. Useful for creative effects where you want the natural width changes of the font to affect the overall text layout.
Selectors control which characters an animator affects and how strongly. Variable font axis animators work with all selector types.
Range Selector (Default)
The Range Selector defines a continuous range of characters to animate. Here are some of the key properties:
|
Property |
Description |
Values |
|---|---|---|
|
Start & End |
Defines which characters are affected |
0% – 100% (or index/units based)
|
|
Offset |
Shifts the range along the text, and animating them creates "traveling" effects |
Values: -∞ to +∞ |
|
Amount |
Controls the strength of the effect |
0% – 100%
|
Here are some examples you can try:
|
Example |
Font axis setting |
Range selector |
Keyframes |
Result |
|---|---|---|---|---|
|
Weight wipe effect |
Weight: 900 (Black) |
|
End keyframed from 0% - 100% |
Bold weight “paints” across text from left to right |
|
Traveling width wave |
Width: 150% (Expanded) |
|
Offset animated over time |
Expanded width travels through the text |
Shape and Ease
|
Property |
Options |
Description |
|---|---|---|
|
Shape |
Square |
Hard edge between affected and unaffected characters |
|
Shape |
Ramp Up |
Gradual increase into the range |
|
Shape |
Ramp Down |
Gradual decrease out of the range |
|
Shape |
Triangle |
Gradual in and out |
|
Shape |
Round |
Smooth bell curve |
|
Shape |
Smooth |
Very gradual transitions |
|
Ease |
High Ease |
Very gradual transitions |
|
Ease |
Low Ease |
Sharper transitions |
Here are an example you can try:
|
Example |
Font axis setting |
Range selector |
Additional settings |
Result |
|---|---|---|---|---|
|
Smooth weight gradient |
Font Axis Weight: 900 |
|
|
Text starts bold and gradually lightens to base weight |
Wiggly Selector
Applies random variations to axis values per character. Here are some of the key properties:
|
Property |
Description |
Results |
|---|---|---|
|
Max Amount / Min Amount |
Maximum and minimum variation from base value |
Creates random fluctuation per character |
|
Wiggles/Second |
How fast the random values change |
Higher means more frenetic movement |
|
Correlation |
How related neighboring characters are |
|
|
Temporal Phase |
Randomizes timing offset per character |
Adds variation in timing |
Here are some examples you can try:
|
Example |
Font axis setting |
Wiggly Selector settings |
Additional settings |
Result |
|---|---|---|---|---|
|
Jittery Weight Effect |
Weight: 400 (Regular) |
|
|
Each character’s weight randomly fluctuates independently |
|
Breathing Width |
Width: 100% (Normal) |
|
Text gently expands/contracts in waves |
Expression Selector
Allows precise, mathematical control over which characters are affected using JavaScript expressions. Amount is the key properties:
- Expression returns a value controlling the effect strength per character
- Can access character index, position, time, and more
Here are some examples you can try:
|
Example |
Expression (Amount) |
Animator Axis |
Result |
|---|---|---|---|
|
Weight Based on Character Position |
// In Expression Selector Amount property: linear(textIndex, 1, textTotal, 0, 100) |
|
First character lightest, last character boldest, linear gradient |
|
Oscillating Slant |
// In Expression Selector Amount property: Math.sin(time * 3 + textIndex * 0.5) * 50 + 50 |
|
Slant waves through text in a sine pattern |
Below are some commonly used expression variables, along with many others available in After Effects:
- textIndex - Current character index (1-based)
- textTotal - Total number of characters
- time - Current composition time
You can add multiple selectors to a single animator for complex effects.
-
Expand the animator in the Timeline panel.
-
Select the Add dropdown next to the animator name.
-
Select the selector type from the following available options:
- Range Selector
- Wiggly Selector
- Expression Selector
A new selector is added and combines with existing selectors. Adjustments to the Amount values are multiplied together. For example, a Range Selector at 50% multiplied by a Wiggly Selector at 80% yields a 40% final effect, allowing for smooth transitions between layers with random variations.
Here is an example you can try to achieve a smooth wave with variation, which combines a Range Selector and a Wiggly Selector to create a bold wave effect with subtle random jitter.
|
Component |
Settings |
|---|---|
|
Animator 1 |
|
|
Range Selector 1 |
|
|
Wiggly Selector 1 |
|
Create different effects on different character ranges. Here are two such examples:
|
Example |
Animator settings |
Selector settings |
|---|---|---|
|
First letter bold, rest normal |
Font Axis Weight: 900 (Black) |
Range Selector:
|
|
Alternating weight |
Animator 1 (Odd characters):
Animator 2 (Even characters):
|
Two Expression Selectors controlling odd/even characters |
Use expressions to link axis values to other animation properties. Here are two examples that you can consider:
1. Weight Driven by Position creates text weight changes based on the layer’s vertical position.
// In Font Axis Weight property: linear(transform.position[1], 0, thisComp.height, 300, 900)
2. Width Responds to Audio creates text weight width reacts to audio amplitude.
// In Font Axis Width property:
audioLevel = thisComp.layer("Audio Layer").audio.audioLevels;
linear(audioLevel[0], -48, 0, 75, 150)
When a text layer contains multiple fonts (mixed formatting). In Text Animators:
- Animator applies axis changes per character based on each character's font
- If a character's font doesn't have the axis, that character is unaffected
- Range selectors still target character ranges, but the effect varies by font
Here is a simple example:
- Text: "Hello" (mixed fonts)
- "He" uses VariableFont A (has Weight axis)
- "llo" uses VariableFont B (no Weight axis)
- Animator: Font Axis Weight - 900
- Result: "He" becomes bold, "llo" unchanged
