Font
Due to limitations with the font shorthand, typeface styles are constructed from multiple CSS variables.
Each typeface uses variables for the following properties:
fontfont-stretch
TIP
The font classes below were added in @qui/styles v2.7.0. Please update if
you're on an older version.
Body
CSS Class
q-font-body-xxlCSS Variables
font: --q-font-body-xxlfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-xlCSS Variables
font: --q-font-body-xlfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-lgCSS Variables
font: --q-font-body-lgfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-mdCSS Variables
font: --q-font-body-mdfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-smCSS Variables
font: --q-font-body-smfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-xsCSS Variables
font: --q-font-body-xsfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-xxsCSS Variables
font: --q-font-body-xxsfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
Body Strong
CSS Class
q-font-body-xxl-strongCSS Variables
font: --q-font-body-xxl-strongfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-xl-strongCSS Variables
font: --q-font-body-xl-strongfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-lg-strongCSS Variables
font: --q-font-body-lg-strongfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-md-strongCSS Variables
font: --q-font-body-md-strongfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-sm-strongCSS Variables
font: --q-font-body-sm-strongfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-xs-strongCSS Variables
font: --q-font-body-xs-strongfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-body-xxs-strongCSS Variables
font: --q-font-body-xxs-strongfont-stretch: --q-font-stretch-bodyEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
Heading
CSS Class
q-font-heading-xxxlCSS Variables
font: --q-font-heading-xxxlfont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-xxlCSS Variables
font: --q-font-heading-xxlfont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-xlCSS Variables
font: --q-font-heading-xlfont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-lgCSS Variables
font: --q-font-heading-lgfont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-mdCSS Variables
font: --q-font-heading-mdfont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-smCSS Variables
font: --q-font-heading-smfont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-xsCSS Variables
font: --q-font-heading-xsfont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-xxsCSS Variables
font: --q-font-heading-xxsfont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
Heading Subtle
CSS Class
q-font-heading-xxxl-subtleCSS Variables
font: --q-font-heading-xxxl-subtlefont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-xxl-subtleCSS Variables
font: --q-font-heading-xxl-subtlefont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-xl-subtleCSS Variables
font: --q-font-heading-xl-subtlefont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-lg-subtleCSS Variables
font: --q-font-heading-lg-subtlefont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-md-subtleCSS Variables
font: --q-font-heading-md-subtlefont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-sm-subtleCSS Variables
font: --q-font-heading-sm-subtlefont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-xs-subtleCSS Variables
font: --q-font-heading-xs-subtlefont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
CSS Class
q-font-heading-xxs-subtleCSS Variables
font: --q-font-heading-xxs-subtlefont-stretch: --q-font-stretch-headingEquivalent CSS
font-size: line-height: font-weight: font-stretch: Example
Aa
Metadata
CSS Class
q-font-metadata-xlCSS Variables
font: --q-font-metadata-xlfont-stretch: --q-font-stretch-metadataEquivalent CSS
font-size: line-height: font-weight: font-stretch: letter-spacing: Example
CSS Class
q-font-metadata-lgCSS Variables
font: --q-font-metadata-lgfont-stretch: --q-font-stretch-metadataEquivalent CSS
font-size: line-height: font-weight: font-stretch: letter-spacing: Example
CSS Class
q-font-metadata-mdCSS Variables
font: --q-font-metadata-mdfont-stretch: --q-font-stretch-metadataEquivalent CSS
font-size: line-height: font-weight: font-stretch: letter-spacing: Example
CSS Class
q-font-metadata-smCSS Variables
font: --q-font-metadata-smfont-stretch: --q-font-stretch-metadataEquivalent CSS
font-size: line-height: font-weight: font-stretch: letter-spacing: Example
Metadata Strong
CSS Class
q-font-metadata-xl-strongCSS Variables
font: --q-font-metadata-xl-strongfont-stretch: --q-font-stretch-metadataEquivalent CSS
font-size: line-height: font-weight: font-stretch: letter-spacing: Example
CSS Class
q-font-metadata-lg-strongCSS Variables
font: --q-font-metadata-lg-strongfont-stretch: --q-font-stretch-metadataEquivalent CSS
font-size: line-height: font-weight: font-stretch: letter-spacing: Example
CSS Class
q-font-metadata-md-strongCSS Variables
font: --q-font-metadata-md-strongfont-stretch: --q-font-stretch-metadataEquivalent CSS
font-size: line-height: font-weight: font-stretch: letter-spacing: Example
CSS Class
q-font-metadata-sm-strongCSS Variables
font: --q-font-metadata-sm-strongfont-stretch: --q-font-stretch-metadataEquivalent CSS
font-size: line-height: font-weight: font-stretch: letter-spacing: Example