Typography

We’ll handle the typography supplied by Quasar in the sections below.

Headings

.text-h1
h1
Headline 1
.text-h2
h2
Headline 2
.text-h3
h3
Headline 3
.text-h4
h4
Headline 4
.text-h5
h5
Headline 5
.text-h6
h6
Headline 6
.text-subtitle1
Subtitle 1
.text-subtitle2
Subtitle 2
.text-body1
Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
.text-body2
Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.
.text-caption
Caption text
.text-overline
Overline

Font Weights

.text-weight-thin
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
.text-weight-light
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
.text-weight-regular
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
.text-weight-medium
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
.text-weight-bold
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
.text-weight-bolder
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

CSS Helper Classes

Class NameDescription
text-rightAlign text to the right
text-leftAlign text to the left
text-centerAlign text to the center
text-justifyText will be justified
text-boldText will be in bold
text-italicText will be in italic
text-no-wrapNon wrapable text (applies white-space: nowrap)
text-strikeApplies text-decoration: line-through
text-uppercaseTransform text to uppercase
text-lowercaseTransform text to lowercase
text-capitalizeCapitalize first letter of the text

Default Font

The default webfont embedded is Roboto. But it is not required. You can use whatever font(s) you like.

Roboto comes with 5 different font weights you can use: 100, 300, 400, 500, 700.

This is where Roboto font comes embedded by default, if you are looking to remove it:

// file: /quasar.conf.js
extras: [
  'roboto-font'
]

Add custom fonts

It is also possible to include other fonts to use them in the app. The following is one way to do it:

  1. Copy your new webfont [customfont].woff (or whatever extension it has; recommended is woff for compatibility across all browsers) in a directory of your choice, for example: ./src/css/fonts/[customfont.woff]
  2. Declare your font in ./src/css/app.styl (or in any place you see fit, but correctly update the relative path to the webfont file):
@font-face
  font-family customfont
  src url(./fonts/customfont.woff)

// declare a class which applies it
.my-font
  font-family 'customfont'
  1. Then use that class where you need it.