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

Use SIL Open Font in example #21597

Merged
merged 5 commits into from
Nov 4, 2022
Merged

Use SIL Open Font in example #21597

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
42ba852
Use SIL Open Font in example
Elchi3 Oct 17, 2022
847ddae
Use Google Font
Elchi3 Oct 18, 2022
6084096
Remove installation requirement given the web font
Elchi3 Oct 18, 2022
21f0c33
Use MonteCarlo
Elchi3 Oct 24, 2022
c59719e
Use self loaded MonteCarlo font
Elchi3 Nov 4, 2022
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
6 changes: 3 additions & 3 deletions files/en-us/web/css/font-variant-alternates/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ This property may take one of two forms:
#### CSS

```css
@font-feature-values "Leitura Display Swashes" {
@font-feature-values "Bellota Text" {
@swash {
fancy: 1;
}
Expand All @@ -102,14 +102,14 @@ p {
}

.variant {
font-family: Leitura Display Swashes;
font-family: Bellota Text;
font-variant-alternates: swash(fancy);
}
```

#### Result

> **Note:** You need to install the OpenType font _Leitura Display Swashes_ for this example to work. You can find a few free versions for testing purposes, for example from [fontsgeek.com](https://fontsgeek.com/fonts/Leitura-Display-Swashes).
> **Note:** You need to install the OpenType font _Bellota Text_ for this example to work. The font is licensed under the [SIL Open Font License Version 1.1](http://scripts.sil.org/OFL) and can be found at <https://github.com/kemie/Bellota-Font>. More fonts can be found in the [Google Font corpus](https://github.com/google/fonts).
Copy link

Choose a reason for hiding this comment

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

While at it, could the test be changed to not require an install of the font (this sounds a bit dated given web fonts, but instead embedded it as a web font either by referring to a Google Fonts URL, or a local copy of Bellota in a src: url(...Bellota filename...)?

Copy link
Member Author

Choose a reason for hiding this comment

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

I believe using Google Fonts or local fonts doesn't work right now in MDN examples. See mdn/yari#5727 (comment)

I will ask around to see if anyone knows more.

Copy link

Choose a reason for hiding this comment

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

Is the inability to use Google fonts because of the CSP?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Google Fonts works: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#using_mix-blend-mode_with_text . It's local fonts that don't.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Google fonts work well, but if you have a problem it is not always easy to tell whether the font file you generated from their API is the problem or your code. Hence the yari issue - in that case I had a known good font I could have used and that would have saved me a lot of time.

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks, loading a Google font works. I updated this.


{{ EmbedLiveSample('Enabling swash glyphs') }}

Expand Down