Skip to content

Commit 4754313

Browse files
MarcosldMarcosld
committed
WEB-2413: Info about fonts and bg colors
1 parent d10e171 commit 4754313

4 files changed

Lines changed: 274 additions & 133 deletions

File tree

‎doc/fonts.md‎

Lines changed: 194 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,260 @@
11
# Fonts
22

3-
<!-- TOC -->
3+
Mistica does **not** inject a font family automatically. Without explicit setup, browsers fall back to their
4+
default serif font (Times New Roman on desktop). You must declare `@font-face` rules and set `font-family` on
5+
`body`.
46

5-
- [Fonts](#fonts)
6-
- [Font family](#font-family)
7-
- [System Fonts (Roboto / San Francisco)](#system-fonts-roboto--san-francisco)
8-
- [OnAir or Telefonica fonts](#onair-or-telefonica-fonts)
9-
- [Override brower fonts for some specific html elements](#override-brower-fonts-for-some-specific-html-elements)
10-
- [Dynamic font sizes](#dynamic-font-sizes)
7+
## Font per skin
118

12-
<!-- /TOC -->
9+
Each skin has a designated font family. Use the correct one for the skin your app is using:
1310

14-
## Font family
11+
| Skin | Getter function | Font family |
12+
| ---------------------------- | ---------------------- | ------------------- |
13+
| `movistar-new` _(preferred)_ | `getMovistarNewSkin()` | `'Movistar Sans'` |
14+
| `movistar` _(legacy)_ | `getMovistarSkin()` | `'On Air'` |
15+
| `o2-new` _(preferred)_ | `getO2NewSkin()` | `'On Air'` |
16+
| `o2` _(legacy)_ | `getO2Skin()` | `'On Air'` |
17+
| `vivo-new` _(preferred)_ | `getVivoNewSkin()` | `'Vivo Type'` |
18+
| `vivo` _(legacy)_ | `getVivoSkin()` | `'Roboto'` |
19+
| `telefonica` | `getTelefonicaSkin()` | `'Telefonica Sans'` |
20+
| `blau` | `getBlauSkin()` | `'Roboto'` |
21+
| `tu` | `getTuSkin()` | `'Telefonica Sans'` |
22+
| `esimflag` | `getEsimflagSkin()` | `'On Air'` |
1523

16-
Mistica components are optimized to work with iOS/Android system fonts (Roboto and San Francisco), but it can
17-
also work fine with other font families.
24+
## Setting font-family
1825

19-
### System Fonts (Roboto / San Francisco)
26+
Set the font from inside a component rendered under `ThemeContextProvider`. This keeps font and background
27+
color in sync with the active theme, including in dark mode:
2028

21-
If you use system fonts in your web application we recommend you to setup it as follows:
29+
```tsx
30+
import {skinVars} from '@telefonica/mistica';
31+
32+
const GlobalStyles = () => (
33+
<style>{`
34+
body {
35+
font-family: 'Movistar Sans', 'Helvetica', 'Arial', sans-serif;
36+
background-color: ${skinVars.colors.background};
37+
}
38+
`}</style>
39+
);
40+
```
41+
42+
Render `<GlobalStyles />` as a direct child of `ThemeContextProvider`, before the rest of the app.
43+
44+
## @font-face setup
45+
46+
Declare the font weights your app needs. Mistica uses **300 (light), 400 (regular), 500 (medium) and 700
47+
(bold)**. Serve the `.woff2` files from your own static hosting.
48+
49+
### On Air (Movistar, O2, O2 New, Esimflag)
2250

2351
```css
52+
@font-face {
53+
font-family: 'On Air';
54+
font-style: normal;
55+
font-weight: 300;
56+
src: url('/fonts/OnAir-Light.woff2') format('woff2');
57+
}
58+
@font-face {
59+
font-family: 'On Air';
60+
font-style: normal;
61+
font-weight: 400;
62+
src: url('/fonts/OnAir-Regular.woff2') format('woff2');
63+
}
64+
@font-face {
65+
font-family: 'On Air';
66+
font-style: normal;
67+
font-weight: 500;
68+
src: url('/fonts/OnAir-Medium.woff2') format('woff2');
69+
}
70+
@font-face {
71+
font-family: 'On Air';
72+
font-style: normal;
73+
font-weight: 700;
74+
src: url('/fonts/OnAir-Bold.woff2') format('woff2');
75+
}
76+
2477
body {
25-
font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
78+
font-family: 'On Air', 'Helvetica', 'Arial', sans-serif;
2679
}
2780
```
2881

29-
And additionaly declare a Roboto font family for desktop browsers. For example:
82+
### Movistar Sans (Movistar New)
3083

3184
```css
3285
@font-face {
33-
font-family: 'Roboto';
86+
font-family: 'Movistar Sans';
3487
font-style: normal;
3588
font-weight: 300;
36-
src:
37-
local('Roboto Light'),
38-
local('Roboto-Light'),
39-
url('/static/fonts/roboto-v18-latin_latin-ext-300.woff2') format('woff2');
89+
src: url('/fonts/MovistarSans-Light.woff2') format('woff2');
4090
}
4191
@font-face {
42-
font-family: 'Roboto';
92+
font-family: 'Movistar Sans';
4393
font-style: normal;
4494
font-weight: 400;
45-
src:
46-
local('Roboto'),
47-
local('Roboto-Regular'),
48-
url('/static/fonts/roboto-v18-latin_latin-ext-regular.woff2') format('woff2');
95+
src: url('/fonts/MovistarSans-Regular.woff2') format('woff2');
4996
}
5097
@font-face {
51-
font-family: 'Roboto';
98+
font-family: 'Movistar Sans';
5299
font-style: normal;
53100
font-weight: 500;
54-
src:
55-
local('Roboto Medium'),
56-
local('Roboto-Medium'),
57-
url('/static/fonts/roboto-v18-latin_latin-ext-500.woff2') format('woff2');
101+
src: url('/fonts/MovistarSans-Medium.woff2') format('woff2');
58102
}
59103
@font-face {
60-
font-family: 'Roboto';
104+
font-family: 'Movistar Sans';
61105
font-style: normal;
62106
font-weight: 700;
63-
src:
64-
local('Roboto Bold'),
65-
local('Roboto-Bold'),
66-
url('/static/fonts/roboto-v18-latin_latin-ext-700.woff2') format('woff2');
107+
src: url('/fonts/MovistarSans-Bold.woff2') format('woff2');
108+
}
109+
110+
body {
111+
font-family: 'Movistar Sans', 'Helvetica', 'Arial', sans-serif;
67112
}
68113
```
69114

70-
This is just an example, you'll need to change the `url()` declarations to point to the fonts served by your
71-
web server. The important part here is to serve different font weights for 300 (light), 400 (regular), 500
72-
(medium) and 700 (bold).
115+
### Vivo Type (Vivo New)
73116

74-
### OnAir or Telefonica fonts
117+
```css
118+
@font-face {
119+
font-family: 'Vivo Type';
120+
font-style: normal;
121+
font-weight: 300;
122+
src: url('/fonts/vivo-type-light.woff2') format('woff2');
123+
}
124+
@font-face {
125+
font-family: 'Vivo Type';
126+
font-style: normal;
127+
font-weight: 400;
128+
src: url('/fonts/vivo-type-regular.woff2') format('woff2');
129+
}
130+
@font-face {
131+
font-family: 'Vivo Type';
132+
font-style: normal;
133+
font-weight: 500;
134+
src: url('/fonts/vivo-type-medium.woff2') format('woff2');
135+
}
136+
@font-face {
137+
font-family: 'Vivo Type';
138+
font-style: normal;
139+
font-weight: 700;
140+
src: url('/fonts/vivo-type-bold.woff2') format('woff2');
141+
}
142+
143+
body {
144+
font-family: 'Vivo Type', 'Helvetica', 'Arial', sans-serif;
145+
}
146+
```
75147

76-
Mistica works fine too with other fonts like OnAir or Telefonica fonts, but these fonts don't have a medium
77-
weight (only light, regular and bold). In these cases, we recomend to use the regular font weight for the 500
78-
`font-weight`. Something like this:
148+
### Telefonica Sans (Telefonica, Tu)
79149

80150
```css
81151
@font-face {
82-
font-family: 'OnAir';
152+
font-family: 'Telefonica Sans';
83153
font-style: normal;
84154
font-weight: 300;
85-
src: url('/static/fonts/OnAir-Light.woff2') format('woff2');
155+
src: url('/fonts/Telefonica_Sans_Light.woff2') format('woff2');
86156
}
87157
@font-face {
88-
font-family: 'OnAir';
158+
font-family: 'Telefonica Sans';
89159
font-style: normal;
90160
font-weight: 400;
91-
src: url('/static/fonts/OnAir-Regular.woff2') format('woff2');
161+
src: url('/fonts/Telefonica_Sans_Regular.woff2') format('woff2');
92162
}
93163
@font-face {
94-
font-family: 'OnAir';
164+
font-family: 'Telefonica Sans';
95165
font-style: normal;
96166
font-weight: 500;
97-
/* Note we are using OnAir Regular for medium (500) font-weight too: */
98-
src: url('/static/fonts/OnAir-Regular.woff2') format('woff2');
167+
src: url('/fonts/Telefonica_Sans_Medium.woff2') format('woff2');
99168
}
100169
@font-face {
101-
font-family: 'OnAir';
170+
font-family: 'Telefonica Sans';
102171
font-style: normal;
103172
font-weight: 700;
104-
src: url('/static/fonts/OnAir-Bold.woff2') format('woff2');
173+
src: url('/fonts/Telefonica_Sans_Bold.woff2') format('woff2');
105174
}
106175

107176
body {
108-
font-family: 'OnAir', 'Helvetica', 'Arial', sans-serif;
177+
font-family: 'Telefonica Sans', 'Helvetica', 'Arial', sans-serif;
109178
}
110179
```
111180

112-
### Override brower fonts for some specific html elements
181+
### Roboto (Vivo, Blau)
113182

114-
All the html elements in your page will inherit the body font by default, except if a style sheet sets a
115-
different font family for the element, and most browsers use to set specific font families for some elements
116-
like `input`, `textarea`, `pre`, etc. If you want to avoid that browser behavior, you have different options:
183+
Roboto is available via [Google Fonts](https://fonts.google.com/specimen/Roboto) or
184+
[Bunny Fonts](https://fonts.bunny.net/family/roboto) (GDPR-friendly alternative). The weights needed are 300,
185+
400, 500, and 700.
117186

118-
1. Explicitly set the your font family for those elements:
187+
Google Fonts import:
188+
189+
```html
190+
<link rel="preconnect" href="https://fonts.googleapis.com" />
191+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
192+
<link
193+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
194+
rel="stylesheet"
195+
/>
196+
```
197+
198+
Or self-hosted `@font-face`:
119199

120200
```css
201+
@font-face {
202+
font-family: 'Roboto';
203+
font-style: normal;
204+
font-weight: 300;
205+
src:
206+
local('Roboto Light'),
207+
local('Roboto-Light'),
208+
url('/fonts/roboto-300.woff2') format('woff2');
209+
}
210+
@font-face {
211+
font-family: 'Roboto';
212+
font-style: normal;
213+
font-weight: 400;
214+
src:
215+
local('Roboto'),
216+
local('Roboto-Regular'),
217+
url('/fonts/roboto-400.woff2') format('woff2');
218+
}
219+
@font-face {
220+
font-family: 'Roboto';
221+
font-style: normal;
222+
font-weight: 500;
223+
src:
224+
local('Roboto Medium'),
225+
local('Roboto-Medium'),
226+
url('/fonts/roboto-500.woff2') format('woff2');
227+
}
228+
@font-face {
229+
font-family: 'Roboto';
230+
font-style: normal;
231+
font-weight: 700;
232+
src:
233+
local('Roboto Bold'),
234+
local('Roboto-Bold'),
235+
url('/fonts/roboto-700.woff2') format('woff2');
236+
}
237+
121238
body {
122239
font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
123240
}
241+
```
124242

243+
## Body background color
244+
245+
Always set `body` background from inside a component under `ThemeContextProvider` using the
246+
`skinVars.colors.background` token. This ensures the background matches the active theme in both light and
247+
dark mode:
248+
249+
```tsx
250+
const GlobalStyles = () => <style>{`body { background-color: ${skinVars.colors.background}; }`}</style>;
251+
```
252+
253+
## Override browser fonts for form elements
254+
255+
Some browsers apply a different `font-family` to form inputs, textareas, and code elements. Override with:
256+
257+
```css
125258
input,
126259
textarea,
127260
pre,
@@ -130,37 +263,22 @@ code {
130263
}
131264
```
132265

133-
2. Apply the font-family with a wildcard selector:
134-
135-
```css
136-
* {
137-
font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
138-
}
139-
```
140-
141-
3. Use a [reset.css](https://meyerweb.com/eric/tools/css/reset/) that does this for you.
142-
143-
We use to recomend option 3.
266+
Or use a CSS reset that handles this, such as
267+
[modern-normalize](https://github.com/sindresorhus/modern-normalize).
144268

145269
## Dynamic font sizes
146270

147-
Mistica components support scalling font sizes automatically based on OS or browser accesibility settings. If
148-
you want your web to properly work with dynamic font sizes, we recommend to setup a base font size of 16px or
149-
100% (which is the same as 16px in most browsers):
271+
To support OS/browser accessibility font size settings, set the base size on `html`:
150272

151273
```css
152274
html {
153275
font-size: 16px; /* or 100% */
154276
}
155277
```
156278

157-
Also, to make dynamic font sizes work properly in iOS devices you need to include this:
279+
To support Dynamic Type on iOS:
158280

159281
```css
160-
/**
161-
* To enable Dynamic Type in apple devices:
162-
* See: https://dev.to/colingourlay/how-to-support-apple-s-dynamic-text-in-your-web-content-with-css-40c0
163-
*/
164282
@supports (font: -apple-system-body) {
165283
html {
166284
font: -apple-system-body !important;

0 commit comments

Comments
 (0)