Skip to content

Commit 0db6cb1

Browse files
treedertreeder
committed
Change default font to new google sans flex
1 parent dc2c989 commit 0db6cb1

File tree

7 files changed

+42
-43
lines changed

7 files changed

+42
-43
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,8 @@ In your CSS, set the default font family and sizes, set the following attributes
132132
@import url(dark.css) (prefers-color-scheme: dark);
133133

134134
:root {
135-
--md-ref-typeface-brand: 'Roboto Flex', sans-serif;
136-
--md-ref-typeface-plain: 'Roboto Flex', sans-serif;
135+
--md-ref-typeface-brand: 'Google Sans Flex', sans-serif;
136+
--md-ref-typeface-plain: 'Google Sans Flex', sans-serif;
137137

138138
font-family: var(--md-ref-typeface-plain);
139139
font-size: 14px;
@@ -155,7 +155,7 @@ Be sure to import the fonts you want to use along with Material Symbols:
155155
onload="this.onload=null;this.rel='stylesheet'" />
156156
<link
157157
rel="preload"
158-
href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&display=swap"
158+
href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;700&display=swap"
159159
as="style"
160160
onload="this.onload=null;this.rel='stylesheet'" />
161161
```

‎demo/css/styles.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ body {
77
}
88

99
:root {
10-
--md-ref-typeface-brand: 'Roboto Flex', sans-serif;
11-
--md-ref-typeface-plain: 'Roboto Flex', sans-serif;
10+
--md-ref-typeface-brand: 'Google Sans Flex', sans-serif;
11+
--md-ref-typeface-plain: 'Google Sans Flex', sans-serif;
1212

1313
background: var(--md-sys-color-background);
1414
color: var(--md-sys-color-on-background);

‎demo/date-picker-demo.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -13,7 +13,7 @@
1313
onload="this.onload=null;this.rel='stylesheet'" />
1414
<link
1515
rel="preload"
16-
href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&family=Roboto+Serif:wght@400;500;700&display=swap"
16+
href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;700&&display=swap"
1717
as="style"
1818
onload="this.onload=null;this.rel='stylesheet'" />
1919

‎demo/expressive.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
onload="this.onload=null;this.rel='stylesheet'" />
1616
<link
1717
rel="preload"
18-
href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&family=Roboto+Serif:wght@400;500;700&display=swap"
18+
href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;700&display=swap"
1919
as="style"
2020
onload="this.onload=null;this.rel='stylesheet'" />
2121

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
onload="this.onload=null;this.rel='stylesheet'" />
1616
<link
1717
rel="preload"
18-
href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&family=Roboto+Serif:wght@400;500;700&display=swap"
18+
href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;700&display=swap"
1919
as="style"
2020
onload="this.onload=null;this.rel='stylesheet'" />
2121

‎demo/time-picker-demo.html‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Time Picker Demo</title>
77
<link rel="preconnect" href="https://fonts.googleapis.com" />
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -13,7 +13,7 @@
1313
onload="this.onload=null;this.rel='stylesheet'" />
1414
<link
1515
rel="preload"
16-
href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&family=Roboto+Serif:wght@400;500;700&display=swap"
16+
href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;700&display=swap"
1717
as="style"
1818
onload="this.onload=null;this.rel='stylesheet'" />
1919

@@ -39,45 +39,44 @@
3939
<script type="module" src="../pickers/time-picker.js"></script>
4040
<script type="module" src="../pickers/picker-dialog.js"></script>
4141
<script type="module" src="../buttons/button.js"></script>
42-
43-
</head>
44-
<body>
42+
</head>
43+
<body>
4544
<div class="demo-section">
46-
<h2>Embedded Time Picker</h2>
47-
<md-time-picker id="embedded-picker"></md-time-picker>
48-
<p>Selected Value: <span id="embedded-value">None</span></p>
45+
<h2>Embedded Time Picker</h2>
46+
<md-time-picker id="embedded-picker"></md-time-picker>
47+
<p>Selected Value: <span id="embedded-value">None</span></p>
4948
</div>
5049

5150
<div class="demo-section">
52-
<h2>Time Picker Dialog</h2>
53-
<md-button id="dialog-trigger" color="filled">Open Time Picker</md-button>
54-
<md-datetime-picker-dialog id="dialog-picker" type="time"></md-datetime-picker-dialog>
55-
<p>Dialog Value: <span id="dialog-value">None</span></p>
51+
<h2>Time Picker Dialog</h2>
52+
<md-button id="dialog-trigger" color="filled">Open Time Picker</md-button>
53+
<md-datetime-picker-dialog id="dialog-picker" type="time"></md-datetime-picker-dialog>
54+
<p>Dialog Value: <span id="dialog-value">None</span></p>
5655
</div>
5756

5857
<script>
59-
// Embedded
60-
const embeddedPicker = document.getElementById('embedded-picker');
61-
const embeddedValue = document.getElementById('embedded-value');
58+
// Embedded
59+
const embeddedPicker = document.getElementById('embedded-picker')
60+
const embeddedValue = document.getElementById('embedded-value')
6261

63-
embeddedValue.textContent = embeddedPicker.value;
62+
embeddedValue.textContent = embeddedPicker.value
6463

65-
embeddedPicker.addEventListener('change', (e) => {
66-
embeddedValue.textContent = e.target.value;
67-
});
64+
embeddedPicker.addEventListener('change', (e) => {
65+
embeddedValue.textContent = e.target.value
66+
})
6867

69-
// Dialog
70-
const dialogTrigger = document.getElementById('dialog-trigger');
71-
const dialogPicker = document.getElementById('dialog-picker');
72-
const dialogValue = document.getElementById('dialog-value');
68+
// Dialog
69+
const dialogTrigger = document.getElementById('dialog-trigger')
70+
const dialogPicker = document.getElementById('dialog-picker')
71+
const dialogValue = document.getElementById('dialog-value')
7372

74-
dialogTrigger.addEventListener('click', () => {
75-
dialogPicker.show();
76-
});
73+
dialogTrigger.addEventListener('click', () => {
74+
dialogPicker.show()
75+
})
7776

78-
dialogPicker.addEventListener('confirm', (e) => {
79-
dialogValue.textContent = dialogPicker.value;
80-
});
77+
dialogPicker.addEventListener('confirm', (e) => {
78+
dialogValue.textContent = dialogPicker.value
79+
})
8180
</script>
82-
</body>
81+
</body>
8382
</html>

‎demo/v1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
onload="this.onload=null;this.rel='stylesheet'" />
1616
<link
1717
rel="preload"
18-
href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&family=Roboto+Serif:wght@400;500;700&display=swap"
18+
href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;700&display=swap"
1919
as="style"
2020
onload="this.onload=null;this.rel='stylesheet'" />
2121

0 commit comments

Comments
 (0)