-
Notifications
You must be signed in to change notification settings - Fork 22.5k
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.
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
Use SIL Open Font in example #21597
Conversation
Preview URLs External URLs (3)URL:
(this comment was updated 2022-11-04 11:46:20.820911) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you @Elchi3 for taking action - one suggestion below.
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). |
There was a problem hiding this comment.
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...)
?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Non-owner LGTM, thanks for updating this page.
It's great to see a live sample for this, but I'm not sure how this shows the use of The first example shows the effect of not setting It looks like you can get just the same effect without ...so I'm not sure what it is adding here. Am I missing something? |
I'm seeing the same thing as Will. It is strange that the example has two differences, the It seems like this is only implemented in Firefox and I'm not sure if I see a visual difference in the rendering either. I'm using macOS. Is it a compat thing? Do we need to choose a different font? Is the code wrong? |
Since neither of us can apparently figure out how to use this, I think it's fair to say that the documentation is not very helpful :). Maybe we should merge this PR as is (since it does resolve the original issue about recommending piracy, which is not good) and have a separate issue about this page? Note that this is part of Interop 2022 and is marked as "done", presumably because the page exists - maybe we should also review pages that exist and decide whether we can improve them. |
|
I've tried like 15 fonts now and tested them in Firefox and Safari and I don't see any differences. :( |
Please check the font in Wakamai Fondue. Swash glyph alternates only exists for certain glyphs, usually S or A or something that has a curly part at the end or beginning of the letter. Wakamai Fondue will show you for which glyphs it has such swashes, then you can adapt the test text accordingly. |
I've tried more and still don't see anything. Do I need more code like Also, I don't know where on Wakamai Fondue it tells me that a font does swashes. I found the "Sansita Swashed" family and it does look like some letters are swashed but the CSS snippet doesn't change anything there either. (Sorry to be so slow here, this isn't my area of expertise) |
If you use https://fonts.google.com/specimen/MonteCarlo it definitely has swash glyphs for the following glyphs (see below). For example, for a capital A, without So with this font, and using the glyphs from the list below, you'll be able to see difference.
For Wakamai Fondue: If you go to https://wakamaifondue.com/ (non beta), and upload the |
I pushed a change to use MonteCarlo so we can all look at the same thing. The idea is that these two lines would render differently. They don't for me. |
Yes, same here, but your test page works with the regular MonteCarlo from the download, Google Fonts seems to strip the swash feature, compare: https://roettsch.es/swash.html where I am embedding the full font with your test page. |
Ahhh finally seeing the swashes as well! :) Maybe it is also worth filing a bug with Google Fonts. |
Thanks for your help understanding this, @drott .
That was the critical fact we were missing :). I spent a bunch of time trying to get swashes to work with MonteCarlo last week, but didn't try locally. For this PR, perhaps we could:
More work, but we could also, in a follow-up perhaps:
|
Can the full font asset be fetched or placed somewhere where the inline
example can fetch it? how do you do examples with images usually?
|
Unfortunately not, because of mdn/yari#5727. |
That issue mentions using "our own CDN" as an alternative - so maybe manually placing it there, then referring to a CDN url for the asset might be an option? I am not sure how complicated that is. |
I believe that's not a reference to an immediately usable alternative, but a suggestion for a possible way to solve it (i.e. it's also a project). I think that if we want to put time into building a solution, then the local files approach would be better in various ways. |
In order to move forward here, I documented how to best get to swashes using a self loaded font. I removed the example rendering because MDN is unable to render it until something in mdn/yari#5727 happened. :( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 thank you Florian. I think this is the best we can do for now :(
Thanks to mdn/yari#7605, we now have a proper fix for this: #27206. |
Description
This PR fixes #21553. I don't much about fonts. I picked a font from this list #21553 (comment) and removed the reference to fontsgeek.com.
Motivation
Use of open source fonts instead of a suggestion to break licensing agreements.
Additional details
None
Related issues and pull requests
None