Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Inter font and set display: swap #2000

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+36 −143
Open

Update Inter font and set display: swap #2000

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7debe65
Update Inter font and set `display: swap`
zecakeh Nov 16, 2024
a6ff3d5
Allow the browser to use the local Inter font if it exists
zecakeh Nov 16, 2024
1fe2979
Add changelog
zecakeh Nov 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 27 additions & 132 deletions assets/css/fonts/Inter.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,167 +2,62 @@
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url(../../fonts/Inter-cyrillic-ext-normal-300.woff2);
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
font-weight: 100 900;
font-display: swap;
src: local('Inter'), url(../../fonts/Inter-cyrillic-ext-normal.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url(../../fonts/Inter-cyrillic-normal-300.woff2);
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
font-weight: 100 900;
font-display: swap;
src: local('Inter'), url(../../fonts/Inter-cyrillic-normal.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url(../../fonts/Inter-greek-ext-normal-300.woff2);
font-weight: 100 900;
font-display: swap;
src: local('Inter'), url(../../fonts/Inter-greek-ext-normal.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url(../../fonts/Inter-greek-normal-300.woff2);
unicode-range: U+0370-03FF;
font-weight: 100 900;
font-display: swap;
src: local('Inter'), url(../../fonts/Inter-greek-normal.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url(../../fonts/Inter-vietnamese-normal-300.woff2);
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
font-weight: 100 900;
font-display: swap;
src: local('Inter'), url(../../fonts/Inter-vietnamese-normal.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url(../../fonts/Inter-latin-ext-normal-300.woff2);
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;
font-weight: 100 900;
font-display: swap;
src: local('Inter'), url(../../fonts/Inter-latin-ext-normal.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another improvement that we could add to this PR is that we really only need the "latin" character set given that the spec is written in english, so we could serve only this font file and render the CSS inline since it would now be a single block. The only catch is that if we ever start to include characters out of that set, we need to remember to add extra font files, but I don't know if that's likely to happen.

@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url(../../fonts/Inter-latin-normal-300.woff2);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url(../../fonts/Inter-cyrillic-ext-normal-400.woff2);
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url(../../fonts/Inter-cyrillic-normal-400.woff2);
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url(../../fonts/Inter-greek-ext-normal-400.woff2);
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url(../../fonts/Inter-greek-normal-400.woff2);
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url(../../fonts/Inter-vietnamese-normal-400.woff2);
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url(../../fonts/Inter-latin-ext-normal-400.woff2);
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;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url(../../fonts/Inter-latin-normal-400.woff2);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url(../../fonts/Inter-cyrillic-ext-normal-700.woff2);
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url(../../fonts/Inter-cyrillic-normal-700.woff2);
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url(../../fonts/Inter-greek-ext-normal-700.woff2);
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url(../../fonts/Inter-greek-normal-700.woff2);
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url(../../fonts/Inter-vietnamese-normal-700.woff2);
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url(../../fonts/Inter-latin-ext-normal-700.woff2);
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;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url(../../fonts/Inter-latin-normal-700.woff2);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-weight: 100 900;
font-display: swap;
src: local('Inter'), url(../../fonts/Inter-latin-normal.woff2) format('woff2');
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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
6 changes: 3 additions & 3 deletions assets/css/fonts/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
## Inter.css

`Inter.css` is a local copy of
https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,700,700i, modified to pull
https://fonts.googleapis.com/css2?family=Inter:opsz,[email protected],100..900&display=swap, modified to pull
font files (`.woff2`) from local sources. It was created
using `download_google_fonts_css.py`.

Expand All @@ -15,9 +15,9 @@ load them. Example call:

```sh
python3 download_google_fonts_css.py \
"https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,700,700i" \
"https://fonts.googleapis.com/css2?family=Inter:opsz,[email protected],100..900&display=swap" \
../../../static/fonts \
../../fonts
../../fonts
```

Which would pop out a `Inter.css` file that should be `@import url("Inter.css")`d
Expand Down
13 changes: 5 additions & 8 deletions assets/css/fonts/download_google_fonts_css.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@
font_lang = None
font_family = None
font_style = None
font_weight = 0
for line in original_contents:
# Check if this line contains a font URL
match = re.match(r".*url\((.*)\) format.*", line)
Expand All @@ -96,16 +95,17 @@
resp = requests.get(font_url)
if resp.status_code == 200:
# Save the font file
filename = "%s-%s-%s-%d.woff2" % (
font_family, font_lang, font_style, font_weight
filename = "%s-%s-%s.woff2" % (
font_family, font_lang, font_style
)
font_filepath = font_output_dir + filename
with open(font_filepath, "wb") as f:
print("Writing font file:", font_filepath)
f.write(resp.content)

# Replace google URL with local URL
line = re.sub(r"url\(.+\)", f"url({css_font_path + filename})", line)
# Replace google URL with local URL and allow the browser to load the
# local font if it exists.
line = re.sub(r"url\(.+?\)", f"local('{font_family}'), url({css_font_path + filename})", line)
else:
print("Warning: failed to download font file:", font_url)

Expand All @@ -121,9 +121,6 @@
font_style_match = re.match(r".*font-style: (.+);$", line)
if font_style_match:
font_style = font_style_match.group(1)
font_weight_match = re.match(r".*font-weight: (.+);$", line)
if font_weight_match:
font_weight = int(font_weight_match.group(1))

# Append the potentially modified line to the new css file
new_css_file_lines.append(line)
Expand Down
1 change: 1 addition & 0 deletions changelogs/internal/newsfragments/2000.clarification
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Update the Inter font and allow the browser to render the page before it is loaded
Binary file removed static/fonts/Inter-cyrillic-ext-normal-300.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-cyrillic-ext-normal-400.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-cyrillic-ext-normal-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added static/fonts/Inter-cyrillic-ext-normal.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-cyrillic-normal-300.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-cyrillic-normal-400.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-cyrillic-normal-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added static/fonts/Inter-cyrillic-normal.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-greek-ext-normal-300.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-greek-ext-normal-400.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-greek-ext-normal-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added static/fonts/Inter-greek-ext-normal.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-greek-normal-300.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-greek-normal-400.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-greek-normal-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added static/fonts/Inter-greek-normal.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-latin-ext-normal-300.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-latin-ext-normal-400.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-latin-ext-normal-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added static/fonts/Inter-latin-ext-normal.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-latin-normal-300.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-latin-normal-400.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-latin-normal-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added static/fonts/Inter-latin-normal.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-vietnamese-normal-300.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-vietnamese-normal-400.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed static/fonts/Inter-vietnamese-normal-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added static/fonts/Inter-vietnamese-normal.woff2
View file
Open in desktop
Binary file not shown.