Merge pull request #13960 from HKuz/fix/oneGoogleFontChall

Combine Google Font challenges into one

seed/challenges/01-responsive-web-design/applied-visual-design.json

@@ -882,86 +882,6 @@
       "challengeType": 0,
       "translations": {}
     },
-    {
-      "id": "587d781c367417b2b2512ac1",
-      "title": "Use a Google Font",
-      "required": [
-        {
-          "link": "https://fonts.googleapis.com/css?family=Open+Sans",
-          "raw": true
-        }
-      ],
-      "description": [
-        "<a href='https://fonts.google.com/' target='_blank'>Google Fonts</a> is a great way to find free fonts to use in a project.",
-        "Once you have selected the preferred font, copy the link tag that is provided and insert it into the <code>head</code> of your page.",
-        "The Open Sans font is already added for you behind the scenes, but the code to include it in your own project is the following:",
-        "<code>&lt;link href=\"https://fonts.googleapis.com/css?family=Open+Sans\" rel=\"stylesheet\"&gt;</code>",
-        "Once the link is in place, the font is available to include in your CSS by using the pattern:<br><code>font-family: \"FAMILY_NAME\", GENERIC_NAME;</code>.",
-        "In this example, \"FAMILY_NAME\" would be <code>\"Open Sans\"</code> and GENERIC_NAME would be <code>sans-serif</code>. The generic name is a fallback font in case the other specified font is not available.",
-        "Family names are case-sensitive, but generic names are not. The quotes around \"Open Sans\" are required because it has a space in its name, but generic names do not require quotes because they are keywords in CSS.",
-        "<hr>",
-        "Set the <code>font-family</code> of the body to use a family name of <code>\"Open Sans\"</code> and generic name of <code>sans-serif</code>."
-      ],
-      "challengeSeed": [
-        "<style>",
-        "  body {",
-        "    ",
-        "  }",
-        "  h4 {",
-        "    text-align: center;",
-        "    background-color: rgba(45, 45, 45, 0.1);",
-        "    padding: 10px;",
-        "    font-size: 27px;",
-        "    text-transform: uppercase;",
-        "  }",
-        "  p {",
-        "    text-align: justify;",
-        "  }",
-        "  .links {",
-        "    text-align: left;",
-        "    color: black;",
-        "    opacity: 0.7;",
-        "  }",
-        "  #thumbnail {",
-        "    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);",
-        "  }",
-        "  .fullCard {",
-        "    width: 245px;",
-        "    border: 1px solid #ccc;",
-        "    border-radius: 5px;",
-        "    margin: 10px 5px;",
-        "    padding: 4px;",
-        "  }",
-        "  .cardContent {",
-        "    padding: 10px;",
-        "  }",
-        "  .cardText {",
-        "    margin-bottom: 30px;",
-        "  }",
-        "</style>",
-        "<div class=\"fullCard\" id=\"thumbnail\">",
-        "  <div class=\"cardContent\">",
-        "    <div class=\"cardText\">",
-        "      <h4>Alphabet</h4>",
-        "      <hr>",
-        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
-        "    </div>",
-        "    <div class=\"cardLinks\">",
-        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
-        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
-      "tests": [
-        "assert($('body').css('font-family') == '\"Open Sans\", sans-serif', 'message: The <code>body</code> tag should have the family name of <code>\"Open Sans\"</code> and the generic name of <code>sans-serif</code>.');"
-      ],
-      "solutions": [],
-      "type": "waypoint",
-      "releasedOn": "Feb 17, 2017",
-      "challengeType": 0,
-      "translations": {}
-    },
     {
       "id": "587d781c367417b2b2512ac2",
       "title": "Set the font-size for Multiple Heading Elements",

seed/challenges/01-responsive-web-design/basic-css.json

@@ -695,11 +695,12 @@
       "title": "Import a Google Font",
       "description": [
         "Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
-        "First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
+        "<a href='https://fonts.google.com/' target='_blank'>Google Fonts</a> is a free library of web fonts that you can use in your CSS by referencing the font's URL.",
-        "Copy the following code snippet and paste it into the top of your code editor:",
+        "To import a Google Font, you can copy the font(s) URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the <code>Lobster</code> font. To do this, copy the following code snippet and paste it into the top of your code editor:",
         "<code>&#60;link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
-        "Remember, before you can apply styles, like a new font, to an element, you'll need to create a CSS rule.",
+        "Now you can use the <code>Lobster</code> font in your CSS by using <code>Lobster</code> as the FAMILY_NAME as in the following example:<br><code>font-family: FAMILY_NAME, GENERIC_NAME;</code>.",
-        "<blockquote>h2 {<br>  font-family: Sans-Serif;<br>}</blockquote>",
+        "The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.",
+        "Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the <code>\"Open Sans\"</code> font, but not to use the <code>Lobster</code> font.",
         "<hr>",
         "Create a CSS rule for the <code>font-family</code> of <code>Lobster</code> and apply this new font to your <code>h2</code> element."
       ],
@@ -807,10 +808,11 @@
       "id": "bad87fee1348bd9aedf08808",
       "title": "Specify How Fonts Should Degrade",
       "description": [
-        "There are several default fonts that are available in all browsers. These include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>",
+        "There are several default fonts that are available in all browsers. These generic font families include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>",
         "When one font isn't available, you can tell the browser to \"degrade\" to another font.",
         "For example, if you wanted an element to use the <code>Helvetica</code> font, but also degrade to the <code>Sans-Serif</code> font when <code>Helvetica</code> wasn't available, you could use this CSS style:",
         "<blockquote>p {<br>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
+        "Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.",
         "<hr>",
         "To begin with, apply the <code>Monospace</code> font to the <code>h2</code> element, so that it now has two fonts - <code>Lobster</code> and <code>Monospace</code>.",
         "In the last challenge, you imported the <code>Lobster</code> font using the <code>link</code> tag. Now comment out that import of the <code>Lobster</code> font from Google Fonts so that it isn't available anymore. Notice how your <code>h2</code> element degrades to the <code>Monospace</code> font.",