I've Got the Font Blues

#1

I am doing an excercise in html coding where I look at a web page and then try to code for that page. The thing that hangs me up is trying to reproduce the cursive font shown here on the second line -
Screen Shot 2020-12-05 at 7.20.28 PM
First of all, how do I get it into position under the first e of Develop?
Second, I have come across this table of Web Browser Font Defaults and for Safari (since I am on an iMac using Safari) it is -

Screen Shot 2020-12-05 at 7.27.08 PM
Screen Shot 2020-12-05 at 7.27.08 PM838×274 34.8 KB

So does this mean that I am restricted to Times and Courier only and can’t use the cursive font shown?
I think that the CSS for fonts go like this -
{
font-family: first choice for font, second choice for font, (serif or sans-serif or monospace;
}
so assuming that there really is a cursive font that one can use in Safari, how would I code for the font-family rule in this case?

#2

Hi, John.

I just Google-d the following:

cursive font mac

I’m wondering if the following would work for you:

{
  font-family: Brush Script, second choice for font, (serif or sans-serif or monospace;
}
#3

Thanks for the comment. So you can see how I tried to implement your suggestion by assigning a cursive font family to the h1 content - Home - but as you can see pasted below the code, I still get a standard font for - Home. So maybe you just can’t do cursive for Safari.

<html>
<head>
  <title>Composing a Layout on a WebPage</title>
  <link rel="stylesheet" href="styles.css">
  <style>
     h1  {
        font-family: "Brush Script","Bickley Script LET", sans-serif,
     }
  </style>
</head>

<body>
   <header>
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="locations.html">Locations</a></li>
         <li><a href="contact.html">Contact</a></li>
      </ul>
      <h1>Home</h1>
   </header>
   <section>
      <div>a</div>
      <div>b</div>
      <div>c</div>
   </section>
   <section>Lower-Section</section>
   <footer>Footer</footer>
</body>
</html>

Screen Shot 2020-12-08 at 7.32.28 AM

#4

I develop almost 100% on Windows so I’ll be interested to hear what a Mac developer has to say.

#5

The font name has to be exact. For Brush Script, you should specify the full name of Brush Script MT. Try that change and see if it fixes it.

#6

Who knew precision mattered? :upside_down_face:
Seriously, that was the holdup - not getting the font name nailed down correctly. So I ran with your suggestion and tried out the following fonts -
Brush Script MT
Bickley Script LET
SchoolHouse Cursive B
As you can see, the first 2 worked but SCB did not. Still - 2 out of 3 ain’t bad! So I guess the moral of this story is that some weird fonts will work and some wont. It’s a matter of experimentation.
Here is the code for my attempts -

h1 {
font-family: “Brush Script MT”, “Bickley Script LET”, sans-serif;
color:rgb(212, 127, 16)
}
h2 {
font-family: “Bickley Script LET”, “Brush Script MT”, sans-serif;
color: rgb(34, 126, 206);
}
h3 {
font-family: “SchoolHouse Cursive B”, “Bickley Script LET”,
sans-serif;
color:rgb(243, 9, 24)
}



Home Page in Brush Script


Will Bickley Script Work ?


SchoolHouse Cursive B

</body>

and here are the results -
Screen Shot 2020-12-08 at 6.44.41 PM