# I've Got the Font Blues

**URL:** <https://forum.kirupa.com/t/ive-got-the-font-blues/645214>\
**Category:** Uncategorized\
**Created:** [December 6, 2020, 2:44am UTC](https://forum.kirupa.com/t/ive-got-the-font-blues/645214 "2020-12-06T02:44:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 6, 2020, 2:44am UTC](https://forum.kirupa.com/t/ive-got-the-font-blues/645214/1 "2020-12-06T02:44:30Z")

</div>

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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/8/80a5ff3459778c179ca39216b8a81bb0eb9b7f38.png)  
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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/5/51ffa8add9fed22e1e0868e9c77ab5935301bcc4.png)  
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?

---

<div class="post-metadata">

**Author:** ![abergquist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/abergquist/32/12871_2.png) [@abergquist](https://forum.kirupa.com/u/abergquist)\
**Post date:** [December 8, 2020, 2:27am UTC](https://forum.kirupa.com/t/ive-got-the-font-blues/645214/2 "2020-12-08T02:27:17Z")

</div>

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;
}
```

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 8, 2020, 2:33pm UTC](https://forum.kirupa.com/t/ive-got-the-font-blues/645214/3 "2020-12-08T14:33:05Z")

</div>

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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/a/af4980f80c3d47aad71e60c5ab316e6d21e07731.png)

---

<div class="post-metadata">

**Author:** ![abergquist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/abergquist/32/12871_2.png) [@abergquist](https://forum.kirupa.com/u/abergquist)\
**Post date:** [December 8, 2020, 4:52pm UTC](https://forum.kirupa.com/t/ive-got-the-font-blues/645214/4 "2020-12-08T16:52:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 8, 2020, 9:17pm UTC](https://forum.kirupa.com/t/ive-got-the-font-blues/645214/5 "2020-12-08T21:17:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 9, 2020, 1:45am UTC](https://forum.kirupa.com/t/ive-got-the-font-blues/645214/6 "2020-12-09T01:45:11Z")

</div>

Who knew precision mattered? 🙃  
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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/c/c273ae8f8dde3d47c1f59f456d7ef3b423eba6ae.png)