Skip to content

Commit d15c67e

Browse files
weaverryanweaverryan
committed
minor #1127 [Site] Font optimization (3/3) (smnandre)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Font optimization (3/3) | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | License | MIT Last PR on the website fonts * load title font (Ubuntu & Playfair) from jsDeliver * use local font if installed (+ fixed missing ``code`` tags and compress the homepage hero image) Commits ------- 2cad60f [Site] Font optimization (3/3)
2 parents 44d5d6b + 2cad60f commit d15c67e

28 files changed

+84
-70
lines changed

‎ux.symfony.com/assets/images/background_homepage.png

-29.9 KB
Loading

‎ux.symfony.com/assets/styles/app.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
@import "../../vendor/twbs/bootstrap/scss/utilities/api";
5555

5656
// Base
57+
@import "app/font";
5758
@import "app/html";
5859
@import "app/root";
5960
@import "app/typography";

‎ux.symfony.com/assets/styles/app/_font.scss

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* ubuntu-latin-500-normal */
2+
@font-face {
3+
font-family: 'Ubuntu';
4+
font-style: normal;
5+
font-display: swap;
6+
font-weight: 500;
7+
src: local("Ubuntu Medium"),
8+
local("Ubuntu-Medium"),
9+
url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/files/ubuntu-latin-500-normal.woff2") format('woff2');
10+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
11+
}
12+
/* ubuntu-latin-700-normal */
13+
@font-face {
14+
font-family: 'Ubuntu';
15+
font-style: normal;
16+
font-display: swap;
17+
font-weight: 700;
18+
src: local("Ubuntu Bold"),
19+
local("Ubuntu-Bold"),
20+
url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/files/ubuntu-latin-700-normal.woff2") format('woff2');
21+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
22+
}
23+
24+
/* playfair-display-latin-700-italic */
25+
@font-face {
26+
font-family: 'Playfair Display';
27+
font-style: italic;
28+
font-display: swap;
29+
font-weight: 700;
30+
src: local("Playfair Display Bold Italic"),
31+
local("PlayfairDisplay-Bold-Italic"),
32+
url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/files/playfair-display-latin-700-italic.woff2") format('woff2');
33+
}

‎ux.symfony.com/assets/styles/app/_root.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
--space-larger: 2rem;
1515

1616
// Fonts
17-
// --font-family-title: "Ubuntu";
17+
--font-family-title: "Ubuntu";
18+
--font-family-decorative: "Playfair Display";
1819
--font-family-text: system-ui, sans-serif;
1920
--font-family-code: ui-monospace, "SF Mono", SFMono-Regular, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
2021

‎ux.symfony.com/assets/styles/app/_typography.scss

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,10 @@ h2.ubuntu {
2121
letter-spacing: -2px;
2222
}
2323

24-
h2.playfair {
25-
font-size: 38px;
26-
font-style: italic;
27-
font-weight: 700;
28-
line-height: 51px;
29-
letter-spacing: -2px;
30-
}
31-
3224
h3, a.component-title {
33-
font-family: Ubuntu;
25+
font-family: var(--font-family-title);
26+
font-weight: 700;
3427
font-size: 28px !important;
35-
font-weight: 700 !important;
3628
line-height: 32px !important;
3729
letter-spacing: -1px;
3830
color: #0A0A0A;
@@ -63,27 +55,27 @@ h4.ubuntu {
6355
}
6456

6557
.ubuntu-header {
66-
font-family: Ubuntu;
67-
font-size: 24px;
58+
font-family: var(--font-family-title);
6859
font-weight: 700;
60+
font-size: 24px;
6961
line-height: 24px;
7062
letter-spacing: -1px;
7163
text-decoration: none;
7264
}
7365

7466
.ubuntu-title {
75-
font-family: Ubuntu;
76-
font-size: 19px;
67+
font-family: var(--font-family-title);
7768
font-weight: 700;
69+
font-size: 19px;
7870
line-height: 22px;
7971
letter-spacing: -0.668767511844635px;
8072
}
8173

8274
.eyebrows {
8375
text-transform: uppercase;
8476
font-family: var(--font-family-text);
85-
font-size: 0.7rem;
8677
font-weight: 600;
78+
font-size: 0.7rem;
8779
line-height: 1.6;
8880
letter-spacing: 0.125rem;
8981
}
@@ -108,12 +100,6 @@ h4.ubuntu {
108100
letter-spacing: -1px;
109101
}
110102

111-
h2.playfair {
112-
font-size: 28px;
113-
line-height: 37px;
114-
letter-spacing: -1px;
115-
}
116-
117103
h3, a.component-title {
118104
font-size: 22px;
119105
line-height: 25px;

‎ux.symfony.com/assets/styles/components/_PackageHeader.scss

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
.PackageHeader {
22
h1 {
33
text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .05);
4+
5+
em {
6+
font-family: var(--font-family-decorative);
7+
padding-inline-start: .5rem;
8+
}
49
}
510

611
.AppHeader + * & {
@@ -13,9 +18,9 @@
1318
}
1419

1520
.nav-options {
16-
font-family: Ubuntu;
17-
font-size: 15px;
21+
font-family: var(--font-family-title);
1822
font-weight: 700;
23+
font-size: 15px;
1924
line-height: 20px;
2025
letter-spacing: 0px;
2126
color: #fff;

‎ux.symfony.com/assets/styles/components/_Terminal.scss

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@
4848
text-overflow: ellipsis;
4949
white-space: nowrap;
5050
padding-inline-start: .25rem;
51+
52+
code {
53+
font-size: inherit;
54+
opacity: .8;
55+
}
5156
}
5257

5358
.Terminal_controls {
@@ -58,8 +63,8 @@
5863
}
5964
.Terminal_controls span {
6065
display: inline-block;
61-
width: .75rem;
62-
height: .75rem;
66+
width: .65rem;
67+
height: .65rem;
6368
border-radius: 50%;
6469

6570
&.red {
@@ -71,8 +76,13 @@
7176
&.green {
7277
background: $green;
7378
}
79+
[data-bs-theme="dark"] & {
80+
opacity: .85;
81+
filter: grayscale(.4);
82+
}
7483
}
7584

85+
7686
.Terminal_body {
7787
background-color: $n-800;
7888
height: 100%;

‎ux.symfony.com/assets/styles/utilities/_font.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.ubuntu {
2-
font-family: Ubuntu;
2+
font-family: var(--font-family-title);
33
}
44

55
.playfair {
6-
font-family: Playfair Display;
6+
font-family: var(--font-family-decorative);
77
}
88

99
.font-title {

‎ux.symfony.com/templates/base.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@
1010
<link rel="mask-icon" href="https://symfony.com/favicons/safari-pinned-tab.svg" color="#5bbad5">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<meta name="color-scheme" content="light dark">
13-
<link rel="preconnect" href="https://fonts.googleapis.com" />
13+
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
1414
{% block stylesheets %}
15-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700i|Ubuntu:400,700&display=swap">
1615
{{ ux_controller_link_tags() }}
1716
<link rel="stylesheet" href="{{ asset('styles/app.scss') }}">
1817
{% endblock %}

‎ux.symfony.com/templates/components/CodeBlock.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
}) }}>
44
{% if showFilename %}
55
<div class="Terminal_header py-2 ps-4 pe-2 mb-0 d-flex justify-content-between align-items-center">
6-
<a id="{{ this.elementId }}" href="#{{ this.elementId }}" class="Terminal_title">{{ filename }}</a>
6+
<a id="{{ this.elementId }}" href="#{{ this.elementId }}" class="Terminal_title"><code>{{ filename }}</code></a>
77
<div class="Terminal_actions">
88
<twig:CodeBlockButtons source="{{ this.rawSource }}" link="{{ this.githubLink }}" />
99
</div>

‎ux.symfony.com/templates/components/Terminal.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
</div>
1010
</div>
1111
<div class="Terminal_body">
12-
<pre class="Terminal_content ps-4 pt-3" style="padding-bottom: {{ bottomPadding }}px; height: {{ height }}">
12+
<pre class="Terminal_content ps-4 pt-3" style="padding-bottom: {{ bottomPadding }}px; height: {{ height }}"><code>
1313
{{- this.process(block('content'))|raw -}}
14-
</pre>
14+
</code></pre>
1515
</div>
1616
</div>

‎ux.symfony.com/templates/ux_packages/autocomplete.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
} %}
88
{% block title_header %}
99
Ajax-Powered Autocomplete
10-
<span class="playfair ps-2">&lt;select&gt;</span>
10+
<em>&lt;select&gt;</em>
1111
{% endblock %}
1212

1313
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/chartjs.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Charts from PHP'
77
} %}
88
{% block title_header %}
9-
Render beautiful graphs with
10-
<span class="playfair ps-2">chart.js</span>
9+
Render beautiful graphs with <em>chart.js</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/cropperjs.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Craft the perfect image'
77
} %}
88
{% block title_header %}
9-
Crop Photos with
10-
<span class="playfair ps-2">Cropper.js</span>
9+
Crop Photos with <em>Cropper.js</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/dropzone.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Styled Upload Zone'
77
} %}
88
{% block title_header %}
9-
Native Upload Dropzone
10-
<span class="playfair ps-2">with style</span>
9+
Native Upload Dropzone <em>with style</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/form-collection.html.twig

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎ux.symfony.com/templates/ux_packages/lazy-image.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Images that Zoom',
77
} %}
88
{% block title_header %}
9-
Load fast with
10-
<span class="playfair ps-2">Lazy Images</span>
9+
Load fast with <em>Lazy Images</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/live_component.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Reactive Twig Templates'
77
} %}
88
{% block title_header %}
9-
An Interactive UI
10-
<span class="playfair ps-2">entirely built in Twig</span>
9+
An Interactive UI <em>entirely built in Twig</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/notify.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Native Browser Notifications'
77
} %}
88
{% block title_header %}
9-
Notify users from
10-
<span class="playfair ps-2">inside PHP</span>
9+
Notify users from <em>inside PHP</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/react.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'React Component Rendering'
77
} %}
88
{% block title_header %}
9-
Render React from
10-
<span class="playfair ps-2">inside Twig</span>
9+
Render React from <em>inside Twig</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/svelte.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Svelte Component Rendering'
77
} %}
88
{% block title_header %}
9-
Render Svelte from
10-
<span class="playfair ps-2">inside Twig</span>
9+
Render Svelte from <em>inside Twig</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/swup.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Slick Page Transitions'
77
} %}
88
{% block title_header %}
9-
Ajax Page Transitions with
10-
<span class="playfair ps-2">Swup</span>
9+
Ajax Page Transitions with <em>Swup</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/toggle_password.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Switch between password & text'
77
} %}
88
{% block title_header %}
9-
From password to text
10-
<span class="playfair ps-2">&amp; vice versa</span>
9+
From password to text <em>&amp; vice versa</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/translator.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'JavaScript-enabled Translation'
77
} %}
88
{% block title_header %}
9-
Translations directly imported in
10-
<span class="playfair ps-2">JavaScript</span>
9+
Translations directly imported in <em>JavaScript</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/turbo.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Speed of an SPA'
77
} %}
88
{% block title_header %}
9-
Turbo your
10-
<span class="playfair ps-2">website</span>
9+
Turbo your <em>website</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/twig-component.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Object-Oriented Templates'
77
} %}
88
{% block title_header %}
9-
PHP Classes that render:
10-
<span class="playfair ps-2">Twig Components</span>
9+
PHP Classes that render: <em>Twig Components</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/typed.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'A Library that Types'
77
} %}
88
{% block title_header %}
9-
Typed brings text
10-
<span class="playfair ps-2">to life</span>
9+
Typed brings text <em>to life</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

‎ux.symfony.com/templates/ux_packages/vue.html.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
eyebrowText: 'Vue.js Component Rendering'
77
} %}
88
{% block title_header %}
9-
Render Vue.js from
10-
<span class="playfair ps-2">inside Twig</span>
9+
Render Vue.js from <em>inside Twig</em>
1110
{% endblock %}
1211

1312
{% block sub_content %}

0 commit comments

Comments
 (0)