Skip to content

Support font-inlining for global styles #23054

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
Closed
1 task done
twerske opened this issue Apr 28, 2022 · 9 comments · Fixed by #26621
Closed
1 task done

Support font-inlining for global styles #23054

twerske opened this issue Apr 28, 2022 · 9 comments · Fixed by #26621
Labels
area: @angular-devkit/build-angular devkit/build-angular:browser feature: insufficient votes Label to add when the not a sufficient number of votes or comments from unique authors feature Issue that requests a new feature
Milestone
needsTriage

Comments

@twerske
Copy link
Contributor

twerske commented Apr 28, 2022 •
edited by alan-agius4
Loading

🚀 Feature request

Command (mark with an x)

  • build

Description

Currently, font inlining only works for font that are declared in the index.html.

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

However, fonts can also be imported in CSS files using the @import rule.

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap");

We should probably handle both cases.
@mgechev
Copy link
Member

mgechev commented Apr 28, 2022

Ideally we'd like to keep the font inlining as an implementation detail and hide it from developers. Can we discover all the fonts in global styles/index.html and inline them?

@alan-agius4
Copy link
Collaborator

We already automatically inline all the Google and Adobe fonts found in the index.html.

Not entirely sure, what is being requested here.

@alan-agius4 alan-agius4 added the needs: more info Reporter must clarify the issue label Apr 29, 2022
@twerske
Copy link
Contributor Author

twerske commented May 3, 2022

This would be the same but for fonts found in styles.css and style files.

Additionally @jelbourn and I discussed a schematic for ng add --font-inlining <font family>

@alan-agius4
Copy link
Collaborator

Following a convo with @twerske on Slack, this request is to enable font-inline of fonts in global stylesheets. (I have update the issue to reflect this).

Regarding @jelbourn request, I am still not sure what it being requested. I also suggest that we keep one feature per issue as it would be easier to track.

@alan-agius4 alan-agius4 added feature Issue that requests a new feature area: @angular-devkit/build-angular devkit/build-angular:browser and removed needs: more info Reporter must clarify the issue labels May 6, 2022
@ngbot ngbot bot modified the milestone: needsTriage May 6, 2022
@alan-agius4 alan-agius4 changed the title schematic to add font inlining for a new font family Support font-inlining for global styles May 6, 2022
@angular-robot angular-robot bot added the feature: votes required Feature request which is currently still in the voting phase label May 6, 2022
@angular-robot
Copy link
Contributor

angular-robot bot commented May 6, 2022

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

@angular-robot
Copy link
Contributor

angular-robot bot commented Jun 15, 2022

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

@angular-robot
Copy link
Contributor

angular-robot bot commented Jul 4, 2022

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

@angular-robot angular-robot bot added feature: insufficient votes Label to add when the not a sufficient number of votes or comments from unique authors and removed feature: votes required Feature request which is currently still in the voting phase labels Jul 4, 2022
@alan-agius4
Copy link
Collaborator

@twerske is this something that we still want to persue?

alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 8, 2023
@alan-agius4
feat(@angular-devkit/build-angular): inline Google and Adobe fonts lo…
842de05 
…cated in stylesheets.

`@import url()` to Google and Adobe fonts that are located in global and component CSS will now be inlined when using the esbuild based builders.

Input
```css
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
```

Output
```css
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
```

Closes angular#23054
@alan-agius4 alan-agius4 mentioned this issue Dec 8, 2023
Merged
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 8, 2023
@alan-agius4
feat(@angular-devkit/build-angular): inline Google and Adobe fonts lo…
ce4bb81 
…cated in stylesheets

`@import url()` to Google and Adobe fonts that are located in global and component CSS will now be inlined when using the esbuild based builders.

Input
```css
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
```

Output
```css
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
```

Closes angular#23054
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 9, 2023
@alan-agius4
feat(@angular-devkit/build-angular): inline Google and Adobe fonts lo…
46f8334 
…cated in stylesheets

`@import url()` to Google and Adobe fonts that are located in global and component CSS will now be inlined when using the esbuild based builders.

Input
```css
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
```

Output
```css
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
```

Closes angular#23054
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 9, 2023
@alan-agius4
feat(@angular-devkit/build-angular): inline Google and Adobe fonts lo…
3c96806 
…cated in stylesheets

`@import url()` to Google and Adobe fonts that are located in global and component CSS will now be inlined when using the esbuild based builders.

Input
```css
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
```

Output
```css
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
```

Closes angular#23054
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Dec 9, 2023
@alan-agius4
feat(@angular-devkit/build-angular): inline Google and Adobe fonts lo…
f1f331e 
…cated in stylesheets

`@import url()` to Google and Adobe fonts that are located in global and component CSS will now be inlined when using the esbuild based builders.

Input
```css
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
```

Output
```css
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
```

Closes angular#23054
alan-agius4 added a commit that referenced this issue Dec 9, 2023
@alan-agius4
feat(@angular-devkit/build-angular): inline Google and Adobe fonts lo…
f6e67df 
…cated in stylesheets

`@import url()` to Google and Adobe fonts that are located in global and component CSS will now be inlined when using the esbuild based builders.

Input
```css
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
```

Output
```css
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
```

Closes #23054
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 9, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: @angular-devkit/build-angular devkit/build-angular:browser feature: insufficient votes Label to add when the not a sufficient number of votes or comments from unique authors feature Issue that requests a new feature
Projects
None yet
Milestone
needsTriage
3 participants
@mgechev @twerske @alan-agius4