Not the Font I Want

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A Display of Watch Brands</title>
    h1  {
      font-family: "Bradley Hand ITC TT", "Handwriting-Dakota", sans-serif;
      color: rgb(16, 127, 224);
  <img src="" alt="this is an Omega watch">

Why am I not getting the font I want - Bradley Hand ITC TT - here?

I don’t see where you are importing it

 h1  {
      font-family: "Bradley Hand ITC TT", "Handwriting-Dakota", sans-serif;
      color: rgb(16, 127, 224);

I don’t know what you mean by “importing it” - I thought that you set the font in styles as I have done with the above code attributing the font to the h1 tag.

But that refers to a font that is installed somewhere, or imported. Is this font installed on your machine? And is that the correct name for the font?

Even if you do have it installed on your system you would still have to load it for everyone else that doesn’t have it installed on their system.

If you can find a web font that is good enough that might be a better option.

<< font-family: "Bradley Hand ITC TT", "Handwriting-Dakota", sans-serif;
      color: rgb(16, 127, 224);>>

Screen Shot 2020-12-14 at 8.50.26 AM

OK - I am embarrassed to admit that I can’t make sense of the answers to my original query. I thought that it was just a matter of specifying the font you want for your h1 (in my example) tag - put that in styles - and that’s it. I have no idea of what it means or takes to “import” or “load” a font. And as for the question - “is this font installed on your machine?” - I would have to say yes. I work on an iMac and use Pages for word processing. Pages has a ton of fonts and the one I wanted for my h1 tag - Bradley Hand ITC TT - is one of them.
<> - sure, I can just go with the default font but even at this beginner’s stage, I am trying to go with a look that’s a bit different from the default. If it isn’t possible to use any old font, that’s fine if I am told that’s the case but if somehow I can use the more unusual fonts, I would like to learn how to do it.

Open fontbook and check that it’s the correct name: you want to look at the properties for the font and find the Postscript name

Imagine I’m looking at your website, and the <h1> should have the Bodomi font. What if my computer doesn’t have that font? That’s why you need an external resource, something that points to a web server where this font can be downloaded.

It’s very simple, if you stick to google fonts, all you have to do is put a <link> tag into the head of your HTML. For the font “Alex Brush”, this link would look like this:

<link href="" rel="stylesheet"> 

You don’t have to manually write that link for the fonts you choose from google, there’s a button “select this style” and also “selected families” where you can just copy the link.

Hey @ttibsen!

Google fonts were discussed in this lesson.

so I did go to the Google Fonts page, found the font I am looking for - ITC Bradley Hand™ - but no button “select this style” where I could copy the link. What am I missing?

Screen Shot 2020-12-14 at 12.20.11 PM

Just so I’m clear on the difference between family name and generic name, in this instance, the family name is Lobster - I imagine the generic name is Impallari - is that correct?

Impallari Type is the foundry, ie who made the font. How you use a free font from Google Fonts is how @jwilkins.oboe describes below.

But for Bradley Hand, if you click the button in your browser it tells you where you get it

Screenshot 2020-12-14 at 19.34.09

You have it on your computer because Apple paid Microsoft to use the font in their software: you can’t just download it for free. Once you have the correct name it will work on your computer, but not on others, like so:

Note this is OSX, I’m not doing anything that you don’t have access to in that screenshot – it’s just Font Book + a browser (where I’ve just added an element to an empty HTML page and used the developer tools to apply the CSS).

It looks like impallri might be the designer.

Here are some screenshots from my phone on how to import google fonts

Hope that helps

Screen Shot 2020-12-14 at 8.11.47 PM
This screen shot is from Google Fonts
I thought the rules for specifying a font were

  • double quotes if font name is more than one word
  • no quotes needed if font name is a single word
    Let me know then about the following observations -
  • Dancing Script should be enclosed in double, not single, quotation marks
  • the quotation marks around Handlee should be double quotation marks if we’re going to have them at all, but in fact Handlee does not even need quotation marks
    So what’s going on here?

According to MDN docs, font family names should be quoted but it doesn’t say it has to be double quoted. It seems like most people use double quotes but the computer still renders the information just fine if it is in single quotes.

OK - good to know there’s some latitude in the rules - Thanks!