Google font with space in its name, what's the correct way of referring in HTML?

Question

This is the font I copied from the link at the google font webpage. Other fonts (muli, oswald, lato) works fine but sawarabi mincho is not rendered when I try to use it, chrome seems to use my default font when I want to use sawarabi mincho.

I tried

p{
    font-family: Sawarabi_Mincho;
}
p{
    font-family: Sawarabi+Mincho;
}
p{
    font-family: Sawarabi Mincho;
}
p{
    font-family: "sawarabi+mincho";
}

but none of these seems to work.

What is the correct way of calling the font that has space in its name?

it depends on the font-face, so show us the font-face. Also you didn't try the *trivial* one `font-family: "Sawarabi Mincho"` — Temani Afif, Aug 14 '18 at 21:19
when you add a new font you are obliged to define it using font-face and there you have the name of the font — Temani Afif, Aug 14 '18 at 21:21

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

Google Fonts tells you if you click on "+" at the font, then click on "1 Family selected" to show up the tool window:

Specify in CSS

Use the following CSS rules to specify these families:

font-family: 'Sawarabi Mincho', sans-serif;

For examples of how fonts can be added to webpages, see the getting started guide.

So this should work:

body {
  font-family: 'Sawarabi Mincho', sans-serif;
}

<!-- head: -->
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">

<!-- body: -->
<h1>A red flare silhouetted the jagged edge of a wing.</h1>

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 14 '18 at 21:20

juzraai

5,693
8
33
47

I tried that the font still doesn't load. – user3000482 Aug 14 '18 at 21:23
Well, this is standard CSS usage as defined in the specification and any basic tutorial. – Rob Aug 14 '18 at 21:24
@user3000482 Did you include the font itself using `` or CSS `@import`? – juzraai Aug 14 '18 at 21:29

Google font with space in its name, what's the correct way of referring in HTML?

1 Answers1