0
# Roboto Font
1

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

4
## Capabilities
5

6
### Roboto Font (Standard)
7

8
Standard Roboto font family with Latin character support.
9

10
```css { .api }
11
/**
12
 * Roboto font face definitions
13
 * Includes multiple weights and styles optimized for web delivery
14
 */
15

16
/* Roboto Regular */
17
@font-face {
18
  font-family: 'Roboto';
19
  font-style: normal;
20
  font-weight: 400;
21
  font-display: swap;
22
  src: url('./web-font/roboto-v20-latin-regular.woff2') format('woff2'),
23
       url('./web-font/roboto-v20-latin-regular.woff') format('woff');
24
}
25

26
/* Roboto Italic */
27
@font-face {
28
  font-family: 'Roboto';
29
  font-style: italic;
30
  font-weight: 400;
31
  font-display: swap;
32
  src: url('./web-font/roboto-v20-latin-italic.woff2') format('woff2'),
33
       url('./web-font/roboto-v20-latin-italic.woff') format('woff');
34
}
35

36
/* Roboto Bold */
37
@font-face {
38
  font-family: 'Roboto';
39
  font-style: normal;
40
  font-weight: 700;
41
  font-display: swap;
42
  src: url('./web-font/roboto-v20-latin-700.woff2') format('woff2'),
43
       url('./web-font/roboto-v20-latin-700.woff') format('woff');
44
}
45

46
/* Roboto Bold Italic */
47
@font-face {
48
  font-family: 'Roboto';
49
  font-style: italic;
50
  font-weight: 700;
51
  font-display: swap;
52
  src: url('./web-font/roboto-v20-latin-700italic.woff2') format('woff2'),
53
       url('./web-font/roboto-v20-latin-700italic.woff') format('woff');
54
}
55

56
/* Roboto Light */
57
@font-face {
58
  font-family: 'Roboto';
59
  font-style: normal;
60
  font-weight: 300;
61
  font-display: swap;
62
  src: url('./web-font/roboto-v20-latin-300.woff2') format('woff2'),
63
       url('./web-font/roboto-v20-latin-300.woff') format('woff');
64
}
65

66
/* Roboto Light Italic */
67
@font-face {
68
  font-family: 'Roboto';
69
  font-style: italic;
70
  font-weight: 300;
71
  font-display: swap;
72
  src: url('./web-font/roboto-v20-latin-300italic.woff2') format('woff2'),
73
       url('./web-font/roboto-v20-latin-300italic.woff') format('woff');
74
}
75

76
/* Roboto Medium */
77
@font-face {
78
  font-family: 'Roboto';
79
  font-style: normal;
80
  font-weight: 500;
81
  font-display: swap;
82
  src: url('./web-font/roboto-v20-latin-500.woff2') format('woff2'),
83
       url('./web-font/roboto-v20-latin-500.woff') format('woff');
84
}
85

86
/* Roboto Medium Italic */
87
@font-face {
88
  font-family: 'Roboto';
89
  font-style: italic;
90
  font-weight: 500;
91
  font-display: swap;
92
  src: url('./web-font/roboto-v20-latin-500italic.woff2') format('woff2'),
93
       url('./web-font/roboto-v20-latin-500italic.woff') format('woff');
94
}
95

96
/* Roboto Black */
97
@font-face {
98
  font-family: 'Roboto';
99
  font-style: normal;
100
  font-weight: 900;
101
  font-display: swap;
102
  src: url('./web-font/roboto-v20-latin-900.woff2') format('woff2'),
103
       url('./web-font/roboto-v20-latin-900.woff') format('woff');
104
}
105

106
/* Roboto Black Italic */
107
@font-face {
108
  font-family: 'Roboto';
109
  font-style: italic;
110
  font-weight: 900;
111
  font-display: swap;
112
  src: url('./web-font/roboto-v20-latin-900italic.woff2') format('woff2'),
113
       url('./web-font/roboto-v20-latin-900italic.woff') format('woff');
114
}
115
```
116

117
### Roboto Font Latin Extended
118

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

121
```css { .api }
122
/**
123
 * Roboto Latin Extended font face definitions
124
 * Includes additional character sets for European languages
125
 */
126

127
/* Roboto Regular Latin Extended */
128
@font-face {
129
  font-family: 'Roboto';
130
  font-style: normal;
131
  font-weight: 400;
132
  font-display: swap;
133
  src: url('./web-font/roboto-v20-latin-ext-regular.woff2') format('woff2'),
134
       url('./web-font/roboto-v20-latin-ext-regular.woff') format('woff');
135
  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;
136
}
137

138
/* Roboto Italic Latin Extended */
139
@font-face {
140
  font-family: 'Roboto';
141
  font-style: italic;
142
  font-weight: 400;
143
  font-display: swap;
144
  src: url('./web-font/roboto-v20-latin-ext-italic.woff2') format('woff2'),
145
       url('./web-font/roboto-v20-latin-ext-italic.woff') format('woff');
146
  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;
147
}
148

149
/* Roboto Bold Latin Extended */
150
@font-face {
151
  font-family: 'Roboto';
152
  font-style: normal;
153
  font-weight: 700;
154
  font-display: swap;
155
  src: url('./web-font/roboto-v20-latin-ext-700.woff2') format('woff2'),
156
       url('./web-font/roboto-v20-latin-ext-700.woff') format('woff');
157
  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;
158
}
159

160
/* Additional weights follow same pattern... */
161
```
162

163
## CSS Usage
164

165
### Import Roboto CSS
166

167
```css { .api }
168
/* Import Roboto font CSS */
169
@import '@quasar/extras/roboto-font/roboto-font.css';
170

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

175
### Apply Roboto Font
176

177
```css { .api }
178
/* Use Roboto as primary font */
179
body {
180
  font-family: 'Roboto', sans-serif;
181
}
182

183
/* Specific typography classes */
184
.roboto-light {
185
  font-family: 'Roboto', sans-serif;
186
  font-weight: 300;
187
}
188

189
.roboto-regular {
190
  font-family: 'Roboto', sans-serif;
191
  font-weight: 400;
192
}
193

194
.roboto-medium {
195
  font-family: 'Roboto', sans-serif;
196
  font-weight: 500;
197
}
198

199
.roboto-bold {
200
  font-family: 'Roboto', sans-serif;
201
  font-weight: 700;
202
}
203

204
.roboto-black {
205
  font-family: 'Roboto', sans-serif;
206
  font-weight: 900;
207
}
208
```
209

210
**Usage Examples:**
211

212
```html
213
<!-- Apply Roboto font to elements -->
214
<div class="roboto-regular">
215
  Regular Roboto text for body content
216
</div>
217

218
<h1 class="roboto-bold">
219
  Bold Roboto heading
220
</h1>
221

222
<p class="roboto-light">
223
  Light Roboto for subtle text
224
</p>
225

226
<span class="roboto-medium">
227
  Medium weight for emphasis
228
</span>
229
```
230

231
## Quasar Integration
232

233
### Quasar Configuration
234

235
```javascript
236
// quasar.conf.js
237
module.exports = function (ctx) {
238
  return {
239
    extras: [
240
      'roboto-font', // Standard Roboto
241
      // OR
242
      'roboto-font-latin-ext' // Extended character support
243
    ]
244
  }
245
}
246
```
247

248
### Quasar CSS Variables
249

250
```css
251
/* Quasar uses Roboto as default when included */
252
body {
253
  font-family: var(--q-font-family); /* Uses Roboto when loaded */
254
}
255

256
/* Typography helper classes */
257
.text-roboto-light { font-weight: 300; }
258
.text-roboto-regular { font-weight: 400; }
259
.text-roboto-medium { font-weight: 500; }
260
.text-roboto-bold { font-weight: 700; }
261
.text-roboto-black { font-weight: 900; }
262
```
263

264
## Font Weights Available
265

266
```typescript { .api }
267
/**
268
 * Available Roboto font weights
269
 */
270
interface RobotoWeights {
271
  light: 300;      // Light weight for subtle text
272
  regular: 400;    // Normal/regular weight for body text
273
  medium: 500;     // Medium weight for emphasis
274
  bold: 700;       // Bold weight for headings
275
  black: 900;      // Black weight for strong emphasis
276
}
277

278
/**
279
 * Available font styles
280
 */
281
interface RobotoStyles {
282
  normal: 'normal';    // Upright text
283
  italic: 'italic';    // Slanted text
284
}
285
```
286

287
## Character Set Support
288

289
### Standard Roboto
290
- **Coverage**: Basic Latin characters (A-Z, a-z, 0-9)
291
- **Languages**: English and basic Western European languages
292
- **Use Case**: Most web applications and interfaces
293

294
### Roboto Latin Extended
295
- **Coverage**: Latin Extended-A and Extended-B character sets
296
- **Languages**: Enhanced support for European languages including:
297
  - French (àáâãäåæçèéêë...)
298
  - German (äöüß...)
299
  - Spanish (ñáéíóú...)
300
  - Italian (àèéìíîòóù...)
301
  - Portuguese (ãçõ...)
302
  - Eastern European languages
303
- **Use Case**: International applications requiring extended character support
304

305
## Font Display Strategy
306

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

309
```css
310
font-display: swap; /* Show fallback font immediately, swap when Roboto loads */
311
```
312

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

315
## Font Format Support
316

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

319
```css
320
src: url('./web-font/roboto-v20-latin-regular.woff2') format('woff2'),
321
     url('./web-font/roboto-v20-latin-regular.woff') format('woff');
322
```
323

324
- **WOFF2**: Modern browsers, smaller file size
325
- **WOFF**: Fallback for older browsers
326

327
## Material Design Integration
328

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

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