From 42ba85299384c9329469afb042310bb3fbfbc781 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Mon, 17 Oct 2022 15:24:46 +0200 Subject: [PATCH 1/5] Use SIL Open Font in example --- files/en-us/web/css/font-variant-alternates/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/font-variant-alternates/index.md b/files/en-us/web/css/font-variant-alternates/index.md index d4ab1a48748a21f..1287a73fc5db9b2 100644 --- a/files/en-us/web/css/font-variant-alternates/index.md +++ b/files/en-us/web/css/font-variant-alternates/index.md @@ -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; } @@ -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 . More fonts can be found in the [Google Font corpus](https://github.com/google/fonts). {{ EmbedLiveSample('Enabling swash glyphs') }} From 847ddae8526b341049d06c66e67323d8c0255d29 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Tue, 18 Oct 2022 11:51:36 +0200 Subject: [PATCH 2/5] Use Google Font --- files/en-us/web/css/font-variant-alternates/index.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/font-variant-alternates/index.md b/files/en-us/web/css/font-variant-alternates/index.md index 1287a73fc5db9b2..0a2c7f4b2e05739 100644 --- a/files/en-us/web/css/font-variant-alternates/index.md +++ b/files/en-us/web/css/font-variant-alternates/index.md @@ -91,7 +91,9 @@ This property may take one of two forms: #### CSS ```css -@font-feature-values "Bellota Text" { +@import url("https://fonts.googleapis.com/css2?family=Bellota"); + +@font-feature-values "Bellota" { @swash { fancy: 1; } @@ -102,7 +104,7 @@ p { } .variant { - font-family: Bellota Text; + font-family: "Bellota"; font-variant-alternates: swash(fancy); } ``` From 6084096fb5361f727eedd31694d5136669265502 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Tue, 18 Oct 2022 11:53:58 +0200 Subject: [PATCH 3/5] Remove installation requirement given the web font --- files/en-us/web/css/font-variant-alternates/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/font-variant-alternates/index.md b/files/en-us/web/css/font-variant-alternates/index.md index 0a2c7f4b2e05739..4a8bbeae48b9311 100644 --- a/files/en-us/web/css/font-variant-alternates/index.md +++ b/files/en-us/web/css/font-variant-alternates/index.md @@ -111,7 +111,7 @@ p { #### Result -> **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 . More fonts can be found in the [Google Font corpus](https://github.com/google/fonts). +> **Note:** The _Bellota_ font is licensed under the [SIL Open Font License Version 1.1](http://scripts.sil.org/OFL) and can be found at . More fonts can be found in the [Google Font corpus](https://github.com/google/fonts). {{ EmbedLiveSample('Enabling swash glyphs') }} From 21f0c332cea8acc3478e14f9a25980e2109c8f19 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Mon, 24 Oct 2022 16:09:20 +0200 Subject: [PATCH 4/5] Use MonteCarlo --- .../en-us/web/css/font-variant-alternates/index.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/font-variant-alternates/index.md b/files/en-us/web/css/font-variant-alternates/index.md index 4a8bbeae48b9311..9d9169ec21a0493 100644 --- a/files/en-us/web/css/font-variant-alternates/index.md +++ b/files/en-us/web/css/font-variant-alternates/index.md @@ -84,34 +84,35 @@ This property may take one of two forms: #### HTML ```html -

Firefox rocks!

-

Firefox rocks!

+

A Fancy Swash

+

A Fancy Swash

``` #### CSS ```css -@import url("https://fonts.googleapis.com/css2?family=Bellota"); +@import url("https://fonts.googleapis.com/css2?family=MonteCarlo"); -@font-feature-values "Bellota" { +@font-feature-values "MonteCarlo" { @swash { fancy: 1; } } p { + font-family: "MonteCarlo"; font-size: 1.5rem; } .variant { - font-family: "Bellota"; + font-feature-settings: "swsh" 1; font-variant-alternates: swash(fancy); } ``` #### Result -> **Note:** The _Bellota_ font is licensed under the [SIL Open Font License Version 1.1](http://scripts.sil.org/OFL) and can be found at . More fonts can be found in the [Google Font corpus](https://github.com/google/fonts). +> **Note:** The MonteCarlo font is licensed under the [SIL Open Font License Version 1.1](http://scripts.sil.org/OFL) and can be found at . More fonts can be found in the [Google Font corpus](https://github.com/google/fonts). {{ EmbedLiveSample('Enabling swash glyphs') }} From c59719e817a1979040f529bf4e7998ef5ed35c77 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Fri, 4 Nov 2022 12:37:13 +0100 Subject: [PATCH 5/5] Use self loaded MonteCarlo font --- .../en-us/web/css/font-variant-alternates/index.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/font-variant-alternates/index.md b/files/en-us/web/css/font-variant-alternates/index.md index 9d9169ec21a0493..d588b4895bd4aae 100644 --- a/files/en-us/web/css/font-variant-alternates/index.md +++ b/files/en-us/web/css/font-variant-alternates/index.md @@ -91,7 +91,10 @@ This property may take one of two forms: #### CSS ```css -@import url("https://fonts.googleapis.com/css2?family=MonteCarlo"); +@font-face { + font-family: MonteCarlo; + src: url(MonteCarlo-Regular.ttf); +} @font-feature-values "MonteCarlo" { @swash { @@ -110,11 +113,9 @@ p { } ``` -#### Result - -> **Note:** The MonteCarlo font is licensed under the [SIL Open Font License Version 1.1](http://scripts.sil.org/OFL) and can be found at . More fonts can be found in the [Google Font corpus](https://github.com/google/fonts). - -{{ EmbedLiveSample('Enabling swash glyphs') }} +> **Note:** For this example to work you need to load the MonteCarlo font which is licensed under the [SIL Open Font License Version 1.1](http://scripts.sil.org/OFL). Download at . +> +> More fonts are available in the [Google Font corpus](https://github.com/google/fonts). However, note that fonts loaded from Google Fonts directly (for example, using `@import url("https://fonts.googleapis.com/css2?family=MonteCarlo");`) won't work. Google Fonts hosted fonts seem to strip the swash feature. ## Specifications