font synthesis

font-synthesis

The font-systhesis property in CSS gives the browser instructions for how to handle font bolded and italicized character when the specified font-family doesn’t include them.

Let’s take Lato from Google Fonts as an example. It says there are 10 different variations of the font.

Each one of those font variations is technically a different font file. If we want to use certain weights and styles, then we’d link those files up so the browser has something to load.

But, not all fonts include files for handling weight and style. In those cases, the browser will “synthesize” the appearance itself. The browser does the best it can, but faux bolding and style sometimes makes text less legible; that is, less legible than a truly designed version. In the mildest of cases, we may see characters overlap. In more severe cases, the text is completely unreadable or might even change the meaning — as could happen with languages like Chinese, Japanese, Korean and other logographic scripts.

That’s where font-synthesis comes in. It controls which typefaces the browser is allowed to synthesize.

In plain English, this means font-synthesis will accept:

• a value of none
• either weight or style
• both weight and style

It’s worth noting that font-synthesis is considered a shorthand property. According to the spec , it’s a combination of font-synthesis-weight and font-synthesis-style where both accept values of auto or none . Since it’s possible to get the same effect using the shorthand, that’s probably the best way to go.

• none : Neither bold nor oblique may be synthesized
• weight : Bold may be synthesized by the browser
• style : Oblique may be synthesized by the browser

font-synthesis may be used with all elements, including the ::first-letter and ::first-line pseudo-elements.

There may be cases where not allowing the browser to synthesize bold and oblique on an entire language makes sense because either one can obscure characters. Here’s an example pulled from the spec that disables synthesized bold and oblique font faces containing Arabic characters:

Browser support

At the time of writing, caniuse reports 20.21% global coverage for the font-synthesis property.

Want to use font-synthesis in email? Campaign Monitor reports that it is supported by the following clients:

• Apple Mail 10+
• Outlook for Mac
• AOL Alto iOS app
• iOS Mail 10+
• Google Inbox

More information

• CSS Fonts Module Level 4 Specification
• “CSS3 test: font-synthesis “ by Eric Meyer
• “How to Italicize Text” by Chris Coyier

• / properties
• / font-synthesis

font-synthesis

The font-synthesis property controls how font faces are synthesized (or generated) when a specific font face is not available for a given font family and weight.

Enable font synthesis for all font faces in the body element:

Disable font synthesis for italic font faces in the h1 element:

Enable font synthesis for all font faces in the input element, but only synthesize bold and oblique font faces for the select element:

Best Practices

• Use font-synthesis sparingly and only when necessary, as synthesized font faces may not always be a good substitute for the intended font face.
• Consider providing fallback font faces using the @font-face rule, rather than relying on font synthesis.
• Test your font choices and font synthesis settings on different devices and screen resolutions to ensure legibility and consistency.
• Be aware that different browsers may handle font synthesis differently, so it's important to test your code on different browsers.

Browser Compatibility

On this page.

• CSS Animations
• CSS Animations: Detecting CSS animation support
• CSS Animations: Tips
• CSS Animations: Using CSS animations
• display-box
• display-inside
• display-internal
• display-legacy
• display-listitem
• display-outside
• -moz-image-rect
• -moz-image-region
• -moz-outline-radius
• -moz-outline-radius-bottomleft
• -moz-outline-radius-bottomright
• -moz-outline-radius-topleft
• -moz-outline-radius-topright
• -webkit-line-clamp
• -webkit-tap-highlight-color
• -webkit-text-fill-color
• -webkit-text-stroke
• -webkit-text-stroke-color
• -webkit-text-stroke-width
• :-moz-first-node
• :-moz-last-node
• :-moz-only-whitespace
• :-moz-submit-invalid
• ::-webkit-scrollbar
• @media.-ms-high-contrast
• brightness()
• drop-shadow()
• filter-function()
• grayscale()
• hue-rotate()
• CSS Flexible Box Layout
• CSS Flexible Box Layout: Aligning Items in a Flex Container
• CSS Flexible Box Layout: Backwards Compatibility of Flexbox
• CSS Flexible Box Layout: Basic Concepts of Flexbox
• CSS Flexible Box Layout: Controlling Ratios of Flex Items Along the Main Ax
• CSS Flexible Box Layout: Mastering Wrapping of Flex Items
• CSS Flexible Box Layout: Ordering Flex Items
• CSS Flexible Box Layout: Relationship of Flexbox to Other Layout Methods
• CSS Flexible Box Layout: Typical Use Cases of Flexbox
• CSS Fonts: OpenType fonts guide
• CSS Fonts: Variable Fonts Guide
• CSS Grid Layout
• CSS Grid Layout: Auto-placement in CSS Grid Layout
• CSS Grid Layout: Basic Concepts of Grid Layout
• CSS Grid Layout: Box Alignment in CSS Grid Layout
• CSS Grid Layout: CSS Grid and Progressive Enhancement
• CSS Grid Layout: CSS Grid Layout and Accessibility
• CSS Grid Layout: CSS Grid Logical Values and Writing Modes
• CSS Grid Layout: Grid Template Areas
• CSS Grid Layout: Layout using Named Grid Lines
• CSS Grid Layout: Line-based Placement with CSS Grid
• CSS Grid Layout: Masonry Layout
• CSS Grid Layout: Realizing common layouts using CSS Grid Layout
• CSS Grid Layout: Relationship of Grid Layout
• CSS Grid Layout: Subgrid
• CSS Images: Implementing image sprites in CSS
• CSS Images: Using CSS gradients
• CSS Lists and Counters
• CSS Lists and Counters: Consistent list indentation
• @media.any-hover
• @media.any-pointer
• @media.aspect-ratio
• @media.color
• @media.color-gamut
• @media.color-index
• @media.device-aspect-ratio
• @media.device-height
• @media.device-width
• @media.display-mode
• @media.dynamic-range
• @media.forced-colors
• @media.grid
• @media.height
• @media.hover
• @media.inverted-colors
• @media.monochrome
• @media.orientation
• @media.overflow-block
• @media.overflow-inline
• @media.pointer
• @media.prefers-color-scheme
• @media.prefers-contrast
• @media.prefers-reduced-motion
• @media.resolution
• @media.scripting
• @media.update-frequency
• @media.video-dynamic-range
• @media.width
• Media Queries
• Media Queries: Testing media queries
• Media Queries: Using media queries
• Media Queries: Using Media Queries for Accessibility
• <angle>
• <basic-shape>
• <color>
• <counter>
• <frequency>
• <gradient>
• <image>
• <integer>
• <length>
• <number>
• <percentage>
• <position>
• <ratio>
• <resolution>
• <shape>
• <string>
• <time>
• @color-profile
• @counter-style
• @counter-style.additive-symbols
• @counter-style.fallback
• @counter-style.negative
• @counter-style.pad
• @counter-style.prefix
• @counter-style.range
• @counter-style.speak-as
• @counter-style.suffix
• @counter-style.symbols
• @counter-style.system
• @font-face.ascent-override
• @font-face.descent-override
• @font-face.font-display
• @font-face.font-family
• @font-face.font-stretch
• @font-face.font-style
• @font-face.font-variant
• @font-face.font-variation-settings
• @font-face.font-weight
• @font-face.line-gap-override
• @font-face.size-adjust
• @font-face.src
• @font-face.unicode-range
• @font-feature-values
• @property.inherits
• @property.initial-value
• @property.syntax
• @scroll-timeline
• accent-color
• actual value
• Adjacent sibling combinator
• align-content
• align-items
• align-tracks
• alpha-value
• angle-percentage
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timeline
• animation-timing-function
• aspect-ratio
• Attribute selectors
• backdrop-filter
• backface-visibility
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• basic-shape.circle
• basic-shape.ellipse
• basic-shape.inset
• basic-shape.polygon
• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-end-end-radius
• border-end-start-radius
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-inline
• border-inline-color
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-style
• border-inline-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-start-end-radius
• border-start-start-radius
• border-style
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-decoration-break
• break-after
• break-before
• break-inside
• caption-side
• caret-color
• Child combinator
• Class selectors
• color value: color
• color value: color keywords
• color value: color-contrast
• color value: color-mix
• color value: device-cmyk
• color value: hexadecimal rgb
• color value: hsl
• color value: hsla
• color value: hwb
• color value: lab
• color value: lch
• color value: rgb
• color value: rgba
• color-scheme
• Column combinator
• column-count
• column-fill
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• computed value
• Containing block
• content-visibility
• counter-increment
• counter-reset
• counter-set
• cross-fade()
• CSS animated properties
• CSS Backgrounds and Borders
• CSS Backgrounds and Borders: Border-image generator
• CSS Backgrounds and Borders: Border-radius generator
• CSS Backgrounds and Borders: Box-shadow generator
• CSS Backgrounds and Borders: Resizing background images
• CSS Backgrounds and Borders: Using multiple backgrounds
• CSS Box Alignment
• CSS Box Alignment: Box Alignment In Block Abspos Tables
• CSS Box Alignment: Box Alignment in Flexbox
• CSS Box Alignment: Box Alignment In Grid Layout
• CSS Box Alignment: Box Alignment in Multi-column Layout
• CSS Box Model
• CSS Box Model: Introduction to the CSS box model
• CSS Box Model: Mastering margin collapsing
• CSS Colors: Applying color
• CSS Colors: Color picker tool
• CSS Conditional Rules
• CSS Conditional Rules: Using Feature Queries
• CSS Containment
• CSS Counter Styles
• CSS Counter Styles: Using CSS counters
• CSS Flow Layout
• CSS Flow Layout: Block and Inline Layout in Normal Flow
• CSS Flow Layout: Flow Layout and Overflow
• CSS Flow Layout: Flow Layout and Writing Modes
• CSS Flow Layout: In Flow and Out of Flow
• CSS Flow Layout: Intro to formatting contexts
• CSS Fragmentation
• CSS Functions
• CSS Logical Properties
• CSS Logical Properties: Basic concepts
• CSS Logical Properties: Floating and positioning
• CSS Logical Properties: Margins borders padding
• CSS Logical Properties: Sizing
• CSS Overflow
• CSS Positioning
• CSS Positioning: Understanding z index
• CSS Positioning: Understanding z index: Adding z-index
• CSS Positioning: Understanding z index: Stacking and float
• CSS Positioning: Understanding z index: Stacking context example 1
• CSS Positioning: Understanding z index: Stacking context example 2
• CSS Positioning: Understanding z index: Stacking context example 3
• CSS Positioning: Understanding z index: Stacking without z-index
• CSS Positioning: Understanding z index: The stacking context
• CSS Properties Reference
• CSS Scroll Snap
• CSS Scroll Snap: Basic concepts
• CSS Selectors
• CSS Selectors: Using the :target pseudo-class in selectors
• CSS Shapes: Basic Shapes
• CSS Shapes: From box values
• CSS Shapes: Overview of CSS Shapes
• CSS Shapes: Shapes From Images
• CSS Text Decoration
• CSS Text: Wrapping Text
• CSS Transitions
• CSS Transitions: Using CSS transitions
• CSS Values and Units
• CSS Variables
• CSS Writing Modes
• currentColor
• custom-ident
• Descendant combinator
• display.two-value syntax of display
• easing-function
• empty-cells
• fit-content
• fit-content function
• flex-direction
• flex-shrink
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size-adjust
• font-stretch

font-synthesis

• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• forced-color-adjust
• frequency-percentage
• General sibling combinator
• gradient.conic-gradient
• gradient.linear-gradient
• gradient.radial-gradient
• gradient.repeating-conic-gradient
• gradient.repeating-linear-gradient
• gradient.repeating-radial-gradient
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-start
• grid-row-end
• grid-row-start
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows
• hanging-punctuation
• hyphenate-character
• ID selectors
• image-orientation
• image-rendering
• image-resolution
• image.image
• image.image-set
• image.paint
• inheritance
• initial value
• initial-letter
• initial-letter-align
• inline-size
• inset-block
• inset-block-end
• inset-block-start
• inset-inline
• inset-inline-end
• inset-inline-start
• justify-content
• justify-items
• justify-self
• justify-tracks
• Layout mode
• length-percentage
• letter-spacing
• line-height
• line-height-step
• list-style-image
• list-style-position
• list-style-type
• margin-block
• margin-block-end
• margin-block-start
• margin-bottom
• margin-inline
• margin-inline-end
• margin-inline-start
• margin-left
• margin-right
• margin-trim
• mask-border
• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width
• mask-composite
• mask-origin
• mask-position
• mask-repeat
• masonry-auto-flow
• max-block-size
• max-content
• max-inline-size
• min-block-size
• min-content
• min-inline-size
• mix-blend-mode
• object-position
• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow-anchor
• overflow-anchor.Guide to scroll anchoring
• overflow-block
• overflow-clip-margin
• overflow-inline
• overflow-wrap
• overscroll-behavior
• overscroll-behavior-block
• overscroll-behavior-inline
• overscroll-behavior-x
• overscroll-behavior-y
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• paint-order
• perspective
• perspective-origin
• place-content
• place-items
• pointer-events
• print-color-adjust
• Privacy and the :visited selector
• Pseudo-classes
• Pseudo-elements
• Replaced element
• resolved value
• revert-layer
• ruby-position
• Scaling of SVG backgrounds
• scroll-behavior
• scroll-margin
• scroll-margin-block
• scroll-margin-block-end
• scroll-margin-block-start
• scroll-margin-bottom
• scroll-margin-inline
• scroll-margin-inline-end
• scroll-margin-inline-start
• scroll-margin-left
• scroll-margin-right
• scroll-margin-top
• scroll-padding
• scroll-padding-block
• scroll-padding-block-end
• scroll-padding-block-start
• scroll-padding-bottom
• scroll-padding-inline
• scroll-padding-inline-end
• scroll-padding-inline-start
• scroll-padding-left
• scroll-padding-right
• scroll-padding-top
• scroll-snap-align
• scroll-snap-coordinate
• scroll-snap-destination
• scroll-snap-stop
• scroll-snap-type
• scrollbar-color
• scrollbar-gutter
• scrollbar-width
• Selector list
• shape-image-threshold
• shape-margin
• shape-outside
• Shorthand properties
• sign function
• Specificity
• specified value
• table-layout
• text-align-last
• text-combine-upright
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip
• text-decoration-skip-ink
• text-decoration-style
• text-decoration-thickness
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-justify
• text-orientation
• text-overflow
• text-rendering
• text-shadow
• text-size-adjust
• text-transform
• text-underline-offset
• text-underline-position
• time-percentage
• touch-action
• transform-box
• transform-origin
• transform-style
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• transparent
• Type selectors
• unicode-bidi
• Universal selectors
• user-select
• Using CSS custom properties
• Value definition syntax
• vertical-align
• Visual formatting model
• white-space
• will-change
• word-spacing
• writing-mode
• CSS Columns
• CSS Columns: Basic Concepts of Multicol
• CSS Columns: Handling content breaks in multicol
• CSS Columns: Handling Overflow in Multicol
• CSS Columns: Spanning Columns
• CSS Columns: Styling Columns
• ::cue-region
• ::file-selector-button
• ::first-letter
• ::first-line
• ::grammar-error
• ::placeholder
• ::selection
• ::spelling-error
• ::target-text
• :first-child
• :first-of-type
• :focus-visible
• :focus-within
• :fullscreen
• :host function
• :host-context
• :indeterminate
• :last-child
• :last-of-type
• :local-link
• :nth-last-child
• :nth-last-col
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :out-of-range
• :picture-in-picture
• :placeholder-shown
• :read-write
• :target-within
• :user-invalid
• :user-valid
• CSS Transforms
• CSS Transforms: Using CSS transforms
• perspective()
• transform-function()
• translate()
• translate3d()
• translateX()
• translateY()
• translateZ()

The font-synthesis CSS property controls which missing typefaces, bold, italic, or small-caps, may be synthesized by the browser.

Indicates that no bold, italic, nor small-caps typeface may be synthesized.

Indicates that a bold typeface may be synthesized if needed.

Indicates that an italic typeface may be synthesized if needed.

Indicates that a small-caps typeface may be synthesized if needed.

Description

Most standard Western fonts include italic and bold variants, and some fonts include a small-caps variant. However, many fonts do not. Fonts used for Chinese, Japanese, Korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text. In these cases, it may be desirable to switch off the browser's default font-synthesis.

Formal definition

Formal syntax, disabling font synthesis, specifications, browser compatibility.

© 2005–2021 MDN contributors. Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later. https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis

• Skip to main content
• Select language
• Skip to search
• font-synthesis

Formal syntax

The font-synthesis CSS property controls which missing typefaces, bold or italic, may be synthesized by the browser.

Most standard Western fonts include italic and bold variants, but many novelty fonts do not. Fonts used for Chinese, Japanese, Korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text. In these cases, it may be desirable to switch off the browser's default font-synthesis.

This property can take any one of the following forms:

• the keyword value none
• either of the keyword values weight and style
• both the keyword values weight and style .

Specifications

Browser compatibility.

[1] Experimental implementation was available since Gecko 33. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.

Document Tags and Contributors

• CSS Property
• CSS Reference
• @font-feature-values
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• units."> font-size
• font-size-adjust
• font-stretch
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• and <sup> elements."> font-variant-position
• font-variation-settings
• font-weight
• line-height

• CSS Tutorial
• CSS Exercises
• CSS Interview Questions
• CSS Selectors
• CSS Properties
• CSS Functions
• CSS Examples
• CSS Cheat Sheet
• CSS Templates
• CSS Frameworks
• CSS Formatter
• CSS StyleDeclaration length Property
• CSS break-inside property
• CSS nav-up property
• CSS fill-opacity Property
• CSS clip-path Property
• CSS 6 Digit Hex Color
• CSS 4 Digit Hex Color
• CSS mask-size property
• CSS mask-repeat property
• CSS element() Function
• CSS overscroll-behavior-y Property
• CSS mask-clip property
• CSS @font-face rule
• CSS 8 Digit Hex Color
• CSS background-origin property
• CSS scroll-snap-align property
• CSS stroke-color property
• CSS mask-position property
• CSS @page rule

CSS font-synthesis Property

The font-synthesis property controls the synthesis of the missing type style such as bold, italic, or underline by the browser. Different font languages like Chinese and Japanese do not include these font variants so synthesizing them may hinder the legibility of the text so the default browser synthesis of the font must be turned off.

Syntax:  

Property Values:  

• none: None indicates that one can not synthesize the weight and style typeface. 
• Style : According to this italic typeface may be synthesized by the browser if required.
• weight : According to this a bold typeface may be synthesized by the browser if required.
• Style weight:  According to this a bold and italic typeface may be synthesized by the browser if required.

Example: In this example, we are using font-synthesis: none property.

Example: In this example, we are using font-synthesis: style property.

Example: In this example, we are using font-synthesis: weight property.

Example: In this example, we are using font-synthesis: style weight property.

Supported Browsers:

• Google Chrome 97+
• Firefox 34+
• Apple Safari 9+

Please Login to comment...

Similar reads.

• CSS-Properties
• Web technologies
• Web Technologies
• What are Tiktok AI Avatars?
• Poe Introduces A Price-per-message Revenue Model For AI Bot Creators
• Truecaller For Web Now Available For Android Users In India
• Google Introduces New AI-powered Vids App
• 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

• Animated Text Generator
• Animation / Keyframe Generator
• Border Radius Generator
• Box Shadow Generator
• Button Generator
• Checkbox / Radio Generator
• Clip Path Generator
• Column Generator
• Cubic Bezier Generator
• Flip Swith Generator
• Flexbox Generator
• Glitch Text Effect
• Google Fonts CSS
• Gradient Generator
• Grid Generator
• Image Filter Generator
• Input Range Generator
• Layout Generator
• Loader / Spinner Generator
• Menu Generator
• Pattern Generator
• RGBA Generator
• Ribbon Generator
• Ribbon Banner Generator
• Scrollbar Generator
• Select Dropdown Generator
• Sprite Generator
• Text Gradient Generator
• Text Input Generator
• Text Rotate Generator
• Text Shadow Generator
• Tooltip Generator
• Triangle Generator
• 3D Transform Generator
• CSS At Rules
• CSS Animations
• CSS Color Names
• CSS Data Types
• CSS Functions
• CSS Preloaders
• CSS Properties
• CSS Pseudo Classes
• CSS Selectors
• LESS to CSS Compiler
• SCSS to CSS Compiler
• Stylus to CSS Compiler
• CSS to LESS Converter
• CSS to SCSS Converter
• CSS to Stylus Converter
• CSS Color Converter
• CSS Cursor Viewer
• CSS Font Preview
• CSS Code Formatter
• CSS Lengths
• CSS Code Optimizer
• CSS Validator
• CSS Visual Style Editor
• Convert Image to Data
• Online CSS Editor
• HTML to Pug Converter
• HTML to Markdown Converter
• Pug to HTML Compiler
• Markdown to HTML Compiler
• HTML Beautifier / Minifier
• HTML Character Codes
• HTML Colors
• HTML Entity Encoder / Decoder
• HTML Online Editor
• HTML Table Generator
• HTML Tutorial
• HTML Attributes
• HTML Event Attributes
• HTML Global Attributes
• HTTP Status Codes
• HTML Validator
• @counter-style
• @font-feature-values
• @font-palette-values
• <absolute-size>
• <alpha-value>
• <angle>
• <angle-percentage>
• <basic-shape>
• <blend-mode>
• <color>
• <filter-function>
• <flex>
• <frequency>
• <gradient>
• <image>
• <integer>
• <length>
• <number>
• <percentage>
• <position>
• <ratio>
• <resolution>
• <string>
• <time>
• <url>
• brightness()
• drop-shadow()
• grayscale()
• hue-rotate()
• conic-gradient()
• linear-gradient()
• radial-gradient()
• repeating-conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• perspective()
• translate()
• translate3d()
• translateX()
• translateY()
• translateZ()
• accent-color
• align-content
• align-items
• animation-composition
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-end-end-radius
• border-end-start-radius
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-inline
• border-inline-color
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-style
• border-inline-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-start-end-radius
• border-start-start-radius
• border-style
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-decoration-break
• break-after
• break-before
• break-inside
• caption-side
• caret-color
• color-scheme
• column-count
• column-fill
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container-name
• container-type
• counter-increment
• counter-reset
• counter-set
• empty-cells
• flex-direction
• flex-shrink
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-palette
• font-size-adjust
• font-stretch
• font-synthesis
• font-synthesis-small-caps
• font-synthesis-style
• font-synthesis-weight
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• forced-color-adjust
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-start
• grid-row-end
• grid-row-start
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows
• hanging-punctuation
• hyphenate-character
• hyphenate-limit-chars
• image-orientation
• image-rendering
• inline-size
• inset-block
• inset-block-end
• inset-block-start
• inset-inline
• inset-inline-end
• inset-inline-start
• justify-content
• justify-items
• justify-self
• letter-spacing
• line-height
• list-style-image
• list-style-position
• list-style-type
• margin-block
• margin-block-end
• margin-block-start
• margin-bottom
• margin-inline
• margin-inline-end
• margin-inline-start
• margin-left
• margin-right
• max-block-size
• max-inline-size
• min-block-size
• min-inline-size
• mix-blend-mode
• object-position
• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow-anchor
• overflow-block
• overflow-clip-margin
• overflow-inline
• overflow-wrap
• overscroll-behavior
• overscroll-behavior-block
• overscroll-behavior-inline
• overscroll-behavior-x
• overscroll-behavior-y
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• paint-order
• perspective
• perspective-origin
• place-content
• place-items
• pointer-events
• print-color-adjust
• ruby-position
• scroll-behavior
• scroll-margin
• scroll-margin-block
• scroll-margin-block-end
• scroll-margin-block-start
• scroll-margin-bottom
• scroll-margin-inline
• scroll-margin-inline-end
• scroll-margin-inline-start
• scroll-margin-left
• scroll-margin-right
• scroll-margin-top
• scroll-padding
• scroll-padding-block
• scroll-padding-block-end
• scroll-padding-block-start
• scroll-padding-inline
• scroll-padding-inline-end
• scroll-padding-inline-start
• scroll-snap-align
• scroll-snap-stop
• scroll-snap-type
• scrollbar-color
• scrollbar-gutter
• scrollbar-width
• shape-image-threshold
• shape-margin
• shape-outside
• table-layout
• text-align-last
• text-combine-upright
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-decoration-thickness
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-justify
• text-orientation
• text-overflow
• text-rendering
• text-shadow
• text-transform
• text-underline-offset
• text-underline-position
• touch-action
• transform-box
• transform-origin
• transform-style
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• white-space
• will-change
• word-spacing
• writing-mode
• :first-child
• :first-of-type
• :focus-visible
• :focus-within
• :fullscreen
• :host-context()
• :indeterminate
• :last-child
• :last-of-type
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :out-of-range
• :placeholder-shown
• :read-write
• ::file-selector-button
• ::first-letter
• ::first-line
• ::placeholder
• ::selection
• ::slotted()
• accept-charset
• autocomplete
• crossorigin
• formenctype
• formnovalidate
• placeholder
• onafterprint
• onbeforeprint
• onbeforeunload
• oncanplaythrough
• oncontextmenu
• ondragenter
• ondragleave
• ondragstart
• ondurationchange
• onhaschange
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmousemove
• onmouseover
• onmousewheel
• onratechange
• onreadystatechange
• ontimeupdate
• ontouchcancel
• ontouchmove
• ontouchstart
• onvolumechange
• contenteditable
• <abbr>
• <address>
• <area>
• <article>
• <aside>
• <audio>
• <base>
• <bdi>
• <bdo>
• <blockquote>
• <body>
• <button>
• <canvas>
• <caption>
• <cite>
• <code>
• <col>
• <colgroup>
• <comment>
• <data>
• <datalist>
• <del>
• <details>
• <dfn>
• <dialog>
• <div>
• <doctype>
• <embed>
• <fieldset>
• <figcaption>
• <figure>
• <footer>
• <form>
• <head>
• <header>
• <html>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <legend>
• <link>
• <main>
• <map>
• <mark>
• <menu>
• <meta>
• <meter>
• <nav>
• <noscript>
• <object>
• <optgroup>
• <option>
• <output>
• <picture>
• <pre>
• <progress>
• <ruby>
• <samp>
• <script>
• <section>
• <select>
• <slot>
• <small>
• <source>
• <span>
• <strong>
• <style>
• <sub>
• <summary>
• <sup>
• <table>
• <tbody>
• <template>
• <textarea>
• <tfoot>
• <thead>
• <title>
• <track>
• <var>
• <video>
• <wbr>
• 100 Continue
• 101 Switching Protocols
• 103 Early Hints
• 201 Created
• 202 Accepted
• 203 Non-Authoritative Information
• 204 No Content
• 205 Reset Content
• 206 Partial Content
• 300 Multiple Choices
• 301 Moved Permanently
• 303 See Other
• 304 Not Modified
• 307 Temporary Redirect
• 308 Permanent Redirect
• 400 Bad Request
• 401 Unauthorized
• 402 Payment Required
• 403 Forbidden
• 404 Not Found
• 405 Method Not Allowed
• 406 Not Acceptable
• 407 Proxy Authentication Required
• 408 Request Timeout
• 409 Conflict
• 411 Length Required
• 412 Precondition Failed
• 413 Content Too Large
• 414 URI Too Long
• 415 Unsupported Media Type
• 416 Range Not Satisfiable
• 417 Expectation Failed
• 421 Misdirected Request
• 422 Unprocessable Content
• 424 Failed Dependency
• 426 Upgrade Required
• 428 Precondition Required
• 429 Too Many Requests
• 431 Request Header Fields Too Large
• 451 Unavailable For Legal Reasons
• 500 Internal Server Error
• 501 Not Implemented
• 502 Bad Gateway
• 503 Service Unavailable
• 504 Gateway Timeout
• 505 HTTP Version Not Supported
• 507 Insufficient Storage
• 508 Loop Detected
• 510 Not Extended
• 511 Network Authentication Required

If you would like to support CSSPortal, please consider making a small donation.

CSS font-synthesis Property

Description.

The font-synthesis property controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces. If 'weight' is not specified, user agents must not synthesize bold faces and if 'style' is not specified user agents must not synthesize italic faces. A value of 'none' disallows all synthetic faces.

Interactive Demo

This font does not include bold , italic , small-caps , and subscript or superscript variants.

中文排版通常不运用 粗体 或 斜体 常不 运用 。

• none Browser is not allowed to synthesize bold or oblique font when not available.
• weight Browser is only allowed to synthesize bold font when not available but not oblique.
• style Browser is only allowed to synthesize oblique font when not available but not bold.
• weight style Browser is allowed to synthesize both bold and oblique.

Browser Support

The following table will show you the current browser support for the CSS font-synthesis property.

Last updated by CSSPortal on: 2nd January 2024

Share this Page

If you have found this page helpful, please consider sharing with other users, just click on your preferred social media link or copy the webpage from the link below.

Your favorites are stored in your browsers cache. If you clear your browsing data, your favorites will be deleted also.

CSS font-synthesis

The font-synthesis property allows you to specify whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks a dedicated glyph for that purpose.

The font-synthesis property is one of the properties introduced in CSS3 for enabling various font related features that can improve the appearance of the text on the page. The font-synthesis property allows you to disable the user agent's default behavior of synthesizing bold and/or oblique font faces when the font family lacks bold or italic faces.

This is what the above code example should look like if your browser supports the font-synthesis property. The text on the left has had none applied, which means that the bold and italic faces are not synthetically generated. The text on the right has had both bold and italics synthetically generated. Because this paricular font doesn't have purpose built bold and italic faces, the text on the left remains normal (i.e. not bold or italic). If the font had dedicated bold and italic glyphs, all of the text would have been bolded and italicised using those glyphs.

Many font families include bold and italic versions of each font face, which are used any time you specify text to be bold or italic. If the font family doesn't include these, the user agent/browser will synthesize the process. In many cases this might be fine, but in some cases it could have less than desirable results. Depending on the font being used, the browser may or may not do a good job in this process. Therefore, the font-synthesis property can be used to explicitly instruct the browser not to do this. In other words, if there's a purpose built glyph available, use it, otherwise just use normal glyph without bolding or italicising it.

The top line has real bold and italic faces whereas the bottom line has synthetic bold and italic faces. Notice the real bold is stronger and the real italics have a nicer, almost cursive feel. The synthetic version on the other hand has a weaker bold, and the italics seem to be a "pushed over" version of the normal font. No design embellishments have been applied to make it more attractive.

The syntax of the font-synthesis property is:

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

General Information

Example code, official specifications.

• CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013)

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer , which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass .

• Web Development

What Is Font Synthesis in CSS?

• Daniyal Hamid
• 23 Sep, 2021

If a font family does not contain typeface for weight, italics or small-caps, some CSS3-compatible browsers may synthesize the appearance of text for the purpose of style matching (i.e. they will try to create the weight, italics and/or small-caps style themselves).

In CSS3, the font-synthesis property can be used to control if the browser is allowed to synthesize bold, oblique/italics and small-caps for font faces when a font family lacks the respective typeface(s).

For example, you can specify individually which typefaces the browser is allowed to synthesize like so:

Alternatively, you may also add the font-synthesis property values in a short-hand form like so:

Font synthesis may create an unexpected look across different browsers which might not be the look you expect. To prevent this behavior, the font-synthesis property can be set to none like so:

Please check browser compatibility / support before using or relying on the font-synthesis property.

This post was published 23 Sep, 2021 by Daniyal Hamid . Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post .

• Skip to main content

• font-synthesis

The font-synthesis CSS property controls which missing typefaces, bold or italic, may be synthesized by the browser.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

This property can take any one of the following forms:

• The keyword value none .
• Either of the keyword values weight and style .
• Both the keyword values weight and style .

Description

Most standard Western fonts include italic and bold variants, but many novelty fonts do not. Fonts used for Chinese, Japanese, Korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text. In these cases, it may be desirable to switch off the browser's default font-synthesis.

Formal definition

Formal syntax, disabling font synthesis, specifications, browser compatibility.

• font-weight
• CSS Reference
• OpenType font features guide
• Variable fonts guide
• @font-feature-values
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size-adjust
• font-smooth
• font-stretch
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• line-height
• line-height-step

CSS Property: font-synthesis

If proper bold or italic characters can’t be found in a font, should they be synthesized by the browser? That’s the question on today’s Oprah.

Possible Values

font-synthesis

The font-synthesis CSS property controls which missing typefaces, bold, italic, or small-caps, may be synthesized by the browser.

Indicates that no bold, italic, nor small-caps typeface may be synthesized.

Indicates that a bold typeface may be synthesized if needed.

Indicates that an italic typeface may be synthesized if needed.

Indicates that a small-caps typeface may be synthesized if needed.

Description

Most standard Western fonts include italic and bold variants, and some fonts include a small-caps variant. However, many fonts do not. Fonts used for Chinese, Japanese, Korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text. In these cases, it may be desirable to switch off the browser's default font-synthesis.

Formal definition

Formal syntax, disabling font synthesis, specifications, browser compatibility.

• font-weight

© 2005–2023 MDN contributors. Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later. https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis

font-synthesis

The font-synthesis property is used to specify whether the browser is allowed to synthesize bold or oblique font faces when the font family used does not contain bold or oblique faces.

Normally, a browser would synthesize bold and oblique font faces when these faces are chosen using the font-weight and font-style properties, respectively, if these faces are not available as part of the font family’s faces. This may not always be desired by web designers, so this property can be used to disable that feature.

If the value of the font-synthesis property is set to none , font synthesis is completely disabled. If either or both weight and style keywords are used, either or both bold and oblique font synthesis is enabled.

Trivia & Notes

Please refer to the font-weight and font-style entries for more information on the browser behavior for each of these properties.

Official Syntax

• Syntax: font-synthesis: none | [ weight || style ]
• Initial: weight style
• Applies To: all elements
• Animatable: no

The possible values of the font-synthesis property are the following:

The font-synthesis property is currently not supported in any browser.

Eric Meyer has created a font-synthesis test that tests how the property should work in supporting browsers. You can find his test here .

Browser Support

The font-synthesis property is currently not supported in any browser. (November 4 th , 2014)

Further Reading

• CSS Fonts Module Level 3
• CSS font-synthesis property test by Eric Meyer

Related Entries

• font-family

• Skip to main content
• Skip to search
• Skip to select language

font-synthesis-style

The font-synthesis-style CSS property lets you specify whether or not the browser may synthesize the oblique typeface when it is missing in a font family.

It is often convenient to use the shorthand property font-synthesis to control all typeface synthesis values.

Indicates that the missing oblique typeface may be synthesized by the browser if needed.

Indicates that the synthesis of the missing oblique typeface by the browser is not allowed.

Formal definition

Formal syntax, disabling synthesis of oblique typeface.

This example shows turning off synthesis of the oblique typeface by the browser in the Montserrat font.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• font-synthesis shorthand, font-synthesis-small-caps , font-synthesis-weight
• font-style , font-variant , font-weight

CSS property: font-synthesis

• 6 - 10 : Not supported
• 11 : Not supported
• 12 - 96 : Not supported
• 97 - 122 : Supported
• 123 : Supported
• 2 - 33 : Not supported
• 34 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 4 - 96 : Not supported
• 124 - 126 : Supported
• 3.1 - 8 : Not supported
• 9 - 17.3 : Supported
• 17.4 : Supported
• 17.5 - TP : Supported
• 10 - 82 : Not supported
• 83 - 108 : Supported
• 109 : Supported

Safari on iOS

• 3.2 - 8.4 : Not supported
• 17.5 : Supported
• all : Support unknown

Android Browser

• 2.1 - 4.4.4 : Not supported

Opera Mobile

• 12 - 12.1 : Not supported
• 80 : Supported

Chrome for Android

Firefox for android, uc browser for android.

• 15.5 : Support unknown

Samsung Internet

• 4 - 17.0 : Not supported
• 18.0 - 23 : Supported
• 24 : Supported
• 14.9 : Support unknown

Baidu Browser

• 13.52 : Support unknown

KaiOS Browser

• 2.5 : Support unknown
• 3 : Support unknown

Optimizing Webfont Selection and Synthesis

By Ilya Grigorik on September 16, 2014

As a result, the CSS @font-face rule allows us define a font family that is composed of many individual resources: regular font weight plus multiple bold and oblique variants, each of which can be responsible for a particular unicode range . In turn, each of these variants is backed by a separate font resource, which enables us to split and minimize the number of bytes required to get the critical text pixels on the screen.

The above example declares the "Awesome Font" family that is composed of two resources that cover the same set of Greek characters (U+0370-03FF) but offer two different "weights": normal (400), and bold (700). However, what happens if one of our CSS rules specifies a different font weight, or sets the font-style property to italic ?

Font selection algorithm

When a weight is specified for which no face exists, a face with a nearby weight is used. In general, bold weights map to faces with heavier weights and light weights map to faces with lighter weights (see the font matching section below for a precise definition).

The @font-face rule is specifically designed to provide the browser with a flexible selection mechanism: if an exact stylistic font match is not available the browser will substitute the closest match, and if none is available, it will synthesize its own font variant. For the curious, the font matching algorithm gets into the gritty details. For example, the selection rules for font-weight are:

• If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.
• If the desired weight is greater than 500, weights above the desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found.
• If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used.
• If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used.

As a result, our .title selector in above example would end up rendering text with the 700 variant in place of the requested 600 weight. However, what about the .subtitle , which needs an oblique font?

Font synthesis

If no suitable match is found, the browser will attempt to synthesize the necessary font variant. The details of how to generate the bold and oblique variants are not specified, hence the results will vary from browser to browser, and will also be highly dependent on the font. As a hands-on example, consider what happens with Open Sans :

Google fonts provides ten different variants, each at ~15KB for the latin character set, or ~150KB in total. Alternatively, the rightmost column provides a preview of the synthesized variants generated from the same (400 weight) variant. As you can tell, there is a noticeable difference, plus a number of additional limitations. The browser:

• Can't make a bold font lighter.
• Can't make an oblique font "straight".
• Has limited ability to synthesize bold(er) fonts.
• Has limited ability to synthesize oblique fonts and may produce wrong shapes - e.g. inspect the lowercase "f" in the synthesized vs. actual columns.

Typography geeks will provide a much longer list of why the synthesized version is inferior, but it's not just the looks:

Authors should also be aware that synthesized approaches may not be suitable for scripts like Cyrillic, where italic forms are very different in shape. It is always better to use an actual italic font rather than rely on a synthetic version.

The browser is simply applying some geometric transformations to the letter shapes and hoping for the best. Often, the results are pretty good, but we do need to be careful about how and where font synthesis is used. On that note, it is worth highlighting that the CSS specification does provide the font-synthesis property to control font synthesis behavior. However, while all browsers support font synthesis, to date only Firefox has implemented the CSS API:

Font synthesis as performance optimization?

The obvious question to ask is whether we can rely on font synthesis in lieu of an extra resource download? After all, each font resource adds extra bytes and may delay rendering of page content.

The synthesized version of oblique Roboto in example above may not look as good, but with a little fiddling (e.g. letter-spacing: -0.3px ) can nonetheless produce reasonable results while avoiding the extra font request.

As a practical example, this site is using Open Sans with two variants: 400 for regular text and 700 for bold. I've tried eliminating the 700 variant and using the synthesized version in the past, and while it didn't look as good (to me), I didn't hear any complaints from the visitors. In the end, I still reverted to requesting both (personal preference), but continued to use the synthesized oblique fonts, which is what you're reading this very moment - surprise!

Your mileage may vary, but it's always a good exercise to periodically sit down and audit what fonts your site is using and ask whether you actually need all of them. In the best case, you can consolidate your styles to use fewer variants, and where you can't, consider if you can rely on the browser to synthesize some font variants on your behalf!

High Performance Browser Networking - O'Reilly

What every web developer needs to know about the various types of networks (WiFi, 3G/4G), transport protocols (UDP, TCP, and TLS), application protocols (HTTP/1.1, HTTP/2), and APIs available in the browser (XHR & Fetch, WebSocket, WebRTC, and more) to deliver the best—fast, reliable, and resilient—user experience.

Read at hpbn.co (free)

FontNet: Closing the gap to font designer performance in font synthesis

Font synthesis has been a very active topic in recent years because manual font design requires domain expertise and is a labor-intensive and time-consuming job. While remarkably successful, existing methods for font synthesis have major shortcomings; they require finetuning for unobserved font style with large reference images, the recent few-shot font synthesis methods are either designed for specific language systems or they operate on low-resolution images which limits their use. In this paper, we tackle this font synthesis problem by learning the font style in the embedding space. To this end, we propose a model, called FontNet, that simultaneously learns to separate font styles in the embedding space where distances directly correspond to a measure of font similarity, and translates input images into the given observed or unobserved font style. Additionally, we design the network architecture and training procedure that can be adopted for any language system and can produce high-resolution font images. Thanks to this approach, our proposed method outperforms the existing state-of-the-art font generation methods on both qualitative and quantitative experiments.

Ammar Ul Hassan Muhammad

Jaeyoung Choi

Related Research

Referenceless user controllable semantic image synthesis, superstylenet: deep image synthesis with superpixel based style encoder, style-guided inference of transformer for high-resolution image synthesis, few-shot font generation with weakly supervised localized representations, fonttransformer: few-shot high-resolution chinese glyph image synthesis via stacked transformers, image super-resolution via deterministic-stochastic synthesis and local statistical rectification, unitts: residual learning of unified embedding space for speech style control.

Please sign up or login with your details

Generation Overview

AI Generator calls

AI Video Generator calls

AI Chat messages

Genius Mode messages

Genius Mode images

AD-free experience

Private images

• Includes 500 AI Image generations, 1750 AI Chat Messages, 30 AI Video generations, 60 Genius Mode Messages and 60 Genius Mode Images per month. If you go over any of these limits, you will be charged an extra $5 for that group.
• For example: if you go over 500 AI images, but stay within the limits for AI Chat and Genius Mode, you'll be charged $5 per additional 500 AI Image generations.
• Includes 100 AI Image generations and 300 AI Chat Messages. If you go over any of these limits, you will have to pay as you go.
• For example: if you go over 100 AI images, but stay within the limits for AI Chat, you'll have to reload on credits to generate more images. Choose from $5 - $1000. You'll only pay for what you use.

Out of credits

Refill your membership to continue using DeepAI

Share your generations with friends

Designed by Jean-Baptiste Levée . From Production Type .

• Similar to {{variation['original_font']['name']}}

At first sight, synthese imbues a basic, almost blatant solidity and strength, but that feeling is soon tempered by gentle curves and subtle detail. This rational and rigorous approach to its shaping produces a neutral yet welcoming voice.

Production Type

Based in Paris and Shanghai, Production Type is a digital type design agency. Its activities span from the exclusive online distribution of its retail type for design professionals, to the creation of custom typefaces for the industrial, luxury, and media sectors.

Visit foundry page

As with everything from Adobe Fonts, you can use these fonts for:

Design projects, create images or vector artwork, including logos, website publishing, create a web project to add any font from our service to your website, embed fonts in pdfs for viewing and printing, video and broadcast, use fonts to create in-house or commercial video content, visit the adobe fonts licensing   faq for full details.

You may encounter slight variations in the name of this font, depending on where you use it. Here’s what to look for.

In application font menus, this font will display:

To use this font on your website, use the following CSS:

Glyph Support & Stylistic Filters

Fonts in the Adobe Fonts library include support for many different languages, OpenType features, and typographic styles.

Learn more about language support

Learn more about OpenType features

Language Support