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.
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.
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:
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.
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?
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
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).
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.
