CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-quasar--extras

Comprehensive collection of web fonts, icons, and animations for the Quasar Framework

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

roboto-font.mddocs/

Roboto Font

Google's Roboto font family designed specifically for Material Design interfaces. Provides excellent readability and consistent typography across web and mobile applications.

Capabilities

Roboto Font (Standard)

Standard Roboto font family with Latin character support.

/**
 * Roboto font face definitions
 * Includes multiple weights and styles optimized for web delivery
 */

/* Roboto Regular */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-regular.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-regular.woff') format('woff');
}

/* Roboto Italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-italic.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-italic.woff') format('woff');
}

/* Roboto Bold */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-700.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-700.woff') format('woff');
}

/* Roboto Bold Italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-700italic.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-700italic.woff') format('woff');
}

/* Roboto Light */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-300.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-300.woff') format('woff');
}

/* Roboto Light Italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-300italic.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-300italic.woff') format('woff');
}

/* Roboto Medium */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-500.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-500.woff') format('woff');
}

/* Roboto Medium Italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-500italic.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-500italic.woff') format('woff');
}

/* Roboto Black */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-900.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-900.woff') format('woff');
}

/* Roboto Black Italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-900italic.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-900italic.woff') format('woff');
}

Roboto Font Latin Extended

Extended Roboto font family with support for Latin Extended characters (includes diacritics and special characters for European languages).

/**
 * Roboto Latin Extended font face definitions
 * Includes additional character sets for European languages
 */

/* Roboto Regular Latin Extended */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-ext-regular.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-ext-regular.woff') format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto Italic Latin Extended */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-ext-italic.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-ext-italic.woff') format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto Bold Latin Extended */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./web-font/roboto-v20-latin-ext-700.woff2') format('woff2'),
       url('./web-font/roboto-v20-latin-ext-700.woff') format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Additional weights follow same pattern... */

CSS Usage

Import Roboto CSS

/* Import Roboto font CSS */
@import '@quasar/extras/roboto-font/roboto-font.css';

/* OR for Latin Extended support */
@import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css';

Apply Roboto Font

/* Use Roboto as primary font */
body {
  font-family: 'Roboto', sans-serif;
}

/* Specific typography classes */
.roboto-light {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.roboto-regular {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.roboto-medium {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.roboto-bold {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

.roboto-black {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

Usage Examples:

<!-- Apply Roboto font to elements -->
<div class="roboto-regular">
  Regular Roboto text for body content
</div>

<h1 class="roboto-bold">
  Bold Roboto heading
</h1>

<p class="roboto-light">
  Light Roboto for subtle text
</p>

<span class="roboto-medium">
  Medium weight for emphasis
</span>

Quasar Integration

Quasar Configuration

// quasar.conf.js
module.exports = function (ctx) {
  return {
    extras: [
      'roboto-font', // Standard Roboto
      // OR
      'roboto-font-latin-ext' // Extended character support
    ]
  }
}

Quasar CSS Variables

/* Quasar uses Roboto as default when included */
body {
  font-family: var(--q-font-family); /* Uses Roboto when loaded */
}

/* Typography helper classes */
.text-roboto-light { font-weight: 300; }
.text-roboto-regular { font-weight: 400; }
.text-roboto-medium { font-weight: 500; }
.text-roboto-bold { font-weight: 700; }
.text-roboto-black { font-weight: 900; }

Font Weights Available

/**
 * Available Roboto font weights
 */
interface RobotoWeights {
  light: 300;      // Light weight for subtle text
  regular: 400;    // Normal/regular weight for body text
  medium: 500;     // Medium weight for emphasis
  bold: 700;       // Bold weight for headings
  black: 900;      // Black weight for strong emphasis
}

/**
 * Available font styles
 */
interface RobotoStyles {
  normal: 'normal';    // Upright text
  italic: 'italic';    // Slanted text
}

Character Set Support

Standard Roboto

  • Coverage: Basic Latin characters (A-Z, a-z, 0-9)
  • Languages: English and basic Western European languages
  • Use Case: Most web applications and interfaces

Roboto Latin Extended

  • Coverage: Latin Extended-A and Extended-B character sets
  • Languages: Enhanced support for European languages including:
    • French (àáâãäåæçèéêë...)
    • German (äöüß...)
    • Spanish (ñáéíóú...)
    • Italian (àèéìíîòóù...)
    • Portuguese (ãçõ...)
    • Eastern European languages
  • Use Case: International applications requiring extended character support

Font Display Strategy

Both Roboto variants use font-display: swap for optimal loading performance:

font-display: swap; /* Show fallback font immediately, swap when Roboto loads */

This ensures text remains visible during font load and swaps to Roboto when available.

Font Format Support

Both WOFF2 and WOFF formats are provided for broad browser compatibility:

src: url('./web-font/roboto-v20-latin-regular.woff2') format('woff2'),
     url('./web-font/roboto-v20-latin-regular.woff') format('woff');
  • WOFF2: Modern browsers, smaller file size
  • WOFF: Fallback for older browsers

Material Design Integration

Roboto is Google's recommended font for Material Design interfaces:

  • Readability: Optimized for both screen and print
  • Consistency: Maintains consistent appearance across platforms
  • Hierarchy: Multiple weights support clear typographic hierarchy
  • Accessibility: Designed with accessibility guidelines in mind

Install with Tessl CLI

npx tessl i tessl/npm-quasar--extras

docs

additional-icons.md

animations.md

fontawesome.md

index.md

ionicons.md

material-icons.md

mdi.md

roboto-font.md

tile.json