chore(css): Move CSS examples - imageset, fonts (#36772)

* chore(css): Move CSS examples - imageset * update contributing reference * include font examples * Apply suggestions from code review Co-authored-by: Brian Thomas Smith <[email protected]> * change order in east asian glyph examples * Update files/en-us/web/css/css_fonts/variable_fonts_guide/index.md Co-authored-by: Brian Thomas Smith <[email protected]> * Update files/en-us/web/css/font-variant-numeric/index.md --------- Co-authored-by: Brian Thomas Smith <[email protected]>
mdn · Nov 14, 2024 · ad6eb6b · ad6eb6b
1 parent 5755d6d
commit ad6eb6b
Show file tree

Hide file tree

Showing 9 changed files with 1,813 additions and 93 deletions.
diff --git a/files/en-us/mdn/community/contributing/our_repositories/index.md b/files/en-us/mdn/community/contributing/our_repositories/index.md
@@ -61,7 +61,7 @@ A Tier 3 project needs 1 admin.
 
 [//]: # "TODO: UPDATE WITH REPO TRIAGE"
 
-The MDN Web Docs GitHub org contains a huge number of example repos. These generally contain freestanding code examples that are often linked to from our pages, but occasionally you'll find one of these examples embedded into a page using a macro call like this — `\{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}`.
+The MDN Web Docs GitHub org contains a huge number of example repos. These generally contain freestanding code examples that are too big or can not be rendered using the [`EmbedLiveSample`](/en-US/docs/MDN/Writing_guidelines/Page_structures/Live_samples#live_sample_macros) macro. These examples are embedded into the content pages using a macro call like this — `\{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}`.
 
 Always remember, if you are updating the code on any given page, you'll need to update the corresponding example repo as well.
 

diff --git a/files/en-us/web/css/@font-face/index.md b/files/en-us/web/css/@font-face/index.md
@@ -107,33 +107,24 @@ The `@font-face` at-rule may be used not only at the top level of a CSS, but als
 
 This example specifies a downloadable font to use, applying it to the entire body of the document:
 
-```html
-<!doctype html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Web Font Sample</title>
-    <style media="screen, print">
-      @font-face {
-        font-family: "Bitstream Vera Serif Bold";
-        src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
-      }
-
-      body {
-        font-family: "Bitstream Vera Serif Bold", serif;
-      }
-    </style>
-  </head>
-  <body>
-    This is Bitstream Vera Serif Bold.
-  </body>
-</html>
+```html live-sample___web-font-example
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
 ```
 
-The output of this example code looks like so:
+```css live-sample___web-font-example
+@font-face {
+  font-family: "Bitstream Vera Serif Bold";
+  src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf");
+}
+
+body {
+  font-family: "Bitstream Vera Serif Bold", serif;
+}
+```
 
-{{EmbedGHLiveSample("css-examples/web-fonts/basic-web-font.html", '100%', '100')}}
+{{EmbedLiveSample("web-font-example", "", "100px")}}
 
 ### Specifying local font alternatives