Trying to figure out why this CSS font style doesn’t work. Can someone help?

Here is my html

<div class="JjongSoloSongs">
        <tr>
    <td>Base</td>
          <td>Déjà-Boo (데자-부) ft.Zion.T</td>
          <td>2015</td>
        </tr>
        <tr>
    <td>Base</td>
          <td>Crazy(Guilty Pleasure)ft.Iron</td>
          <td>2015</td>
        </tr>
        <tr>
    <td>Story Op.1</td>
          <td>End of a Day (하루의 끝)</td>
          <td>2015</td>
        </tr>
        <tr>
    <td>S.M. Station Season 1</td>
          <td>Your Voice (한마디) (with Heritage)</td>
          <td>2016</td>
        </tr>
        <tr>
          <td>S.M. Station Season 1</td>
          <td>Inspiration</td>
          <td>2016</td>
        </tr>
    <td>She Is</td>
          <td>She Is(좋아)</td>
          <td>2016</td>
        </tr>
        <tr>
        <tr>
    <td>Story Op.2</td>
          <td>Lonely (ft.Taeyeon)</td>
          <td>2017</td>
        </tr>
        <tr>
    <td>Poet | Artist</td>
          <td>Shinin</td>
          <td>2018</td>
        </tr>
        <td>Poet | Artist</td>
          <td>Before Our Spring (우린 봄이 오기 전에)</td>
          <td>2018</td>
        </tr>
            </div>
      </table>

This is my CSS

.JjongSoloSongs{
  font-style: cursive;
}

I’m trying to make this table’s text font on replit into cursive but it doesn’t seem to work.

Hi

cursive isn’t a valid value for the font-style property.

If you want your text to display in a cursive style then you will need to use a cursive font-family such as Lobster from Google fonts.

You can filter the Google fonts page using a category of “Handwriting” to see their cursive fonts.

I tried to do

.JjongSoloSongs{
  font-family: Snell Roundhand, cursive;
}

But it doesn’t seem to work on replit when I tried to run it.

Font family names that contain spaces need to be quoted e.g.

"Snell Roundhand"

It still doesn’t work after using

“Snell Roundhand”

Idk y

I can’t offer any more suggestions unless you post a link to your replit.

Here is the link to my replit

I think this is your replit?

I might be missing something, but I’m not seeing either a link to an online source for your font, or any font file (if you downloaded the font).

For example, if I wanted to use the “Tangerine” Google font, I’d go to the Google fonts page, select that font and then add the supplied link or import statement to my code.

1 Like

yes, I’m sorry. Idk why it didn’t work

It’s that complicated? Sigh….

There are a limited number of fonts installed by default in your browser.
If you want to use a different font, then you either need to find it online or find a source to download it from.

Google fonts is one of the easiest ways to do this, so I’d suggest that you try to find a font that you like on the Google Fonts page.

You can filter the categories (the Handwriting category will show you the cursive fonts).

When you find one that you like, select the styles that you want.
Then look on the right of the screen for the code that you need to add.

It’s really not that complicated.

I found you a YouTube video that shows how to use Google fonts.

I tried to add this into my html head, but idk y it isn’t working

<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet'>

Then I did

.JjongSoloSong{
Font-family: “Cookie”;

It’s not working

Check your spelling of
font-family

Remember - capitalisation is important.

And you don’t need quotes around your font name - this one doesn’t have any spaces.

You can copy the CSS that you need from the Google fonts page - just scroll down from the link code.
When I do that for the Cookie font, it gives me
font-family: 'Cookie', cursive;

For CSS this is what I did

.JjongSoloSongs{
  font-family: Cookie, cursive;

For html this is what I did

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
    <link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet'>
</head>

Is it because I linked the font style wrong or something? Or is it my div class?

<div class="JjongSoloSongs">
        <tr>
    <td>Base</td>
          <td>Déjà-Boo (데자-부) ft.Zion.T</td>
          <td>2015</td>
        </tr>
        <tr>
    <td>Base</td>
          <td>Crazy(Guilty Pleasure)ft.Iron</td>
          <td>2015</td>
        </tr>
        <tr>
    <td>Story Op.1</td>
          <td>End of a Day (하루의 끝)</td>
          <td>2015</td>
        </tr>
        <tr>
    <td>S.M. Station Season 1</td>
          <td>Your Voice (한마디) (with Heritage)</td>
          <td>2016</td>
        </tr>
        <tr>
          <td>S.M. Station Season 1</td>
          <td>Inspiration</td>
          <td>2016</td>
        </tr>
    <td>She Is</td>
          <td>She Is(좋아)</td>
          <td>2016</td>
        </tr>
        <tr>
        <tr>
    <td>Story Op.2</td>
          <td>Lonely (ft.Taeyeon)</td>
          <td>2017</td>
        </tr>
        <tr>
    <td>Poet | Artist</td>
          <td>Shinin</td>
          <td>2018</td>
        </tr>
        <td>Poet | Artist</td>
          <td>Before Our Spring (우린 봄이 오기 전에)</td>
          <td>2018</td>
        </tr>
            </div>
      </table>

I’ve just run your html through a validator, and you do have some syntax errors.

There’s also a problem in your css file.

The specific problems affecting your font are:

  • your div should be before any of your table elements - just move it up a few lines to before the comment line
  • your css comment lines aren’t correct.
    A css comment is enclosed in /* */ like this:
    /*makes the paragraph stay in one line*/
    Make sure to change both of your css comment lines.

I’ve forked your replit, and with those changes the font works.

After that, it would be worth using the validator to fix the other syntax errors as well.

Hi. I never heard of font-style: cursive but font-style: italic.[quote=“jadachang1218, post:1, topic:540082, full:true”]
Here is my html

<div class="JjongSoloSongs">
        <tr>
    <td>Base</td>
          <td>Déjà-Boo (데자-부) ft.Zion.T</td>
          <td>2015</td>
        </tr>
        <tr>
    <td>Base</td>
          <td>Crazy(Guilty Pleasure)ft.Iron</td>
          <td>2015</td>
        </tr>
        <tr>
    <td>Story Op.1</td>
          <td>End of a Day (하루의 끝)</td>
          <td>2015</td>
        </tr>
        <tr>
    <td>S.M. Station Season 1</td>
          <td>Your Voice (한마디) (with Heritage)</td>
          <td>2016</td>
        </tr>
        <tr>
          <td>S.M. Station Season 1</td>
          <td>Inspiration</td>
          <td>2016</td>
        </tr>
    <td>She Is</td>
          <td>She Is(좋아)</td>
          <td>2016</td>
        </tr>
        <tr>
        <tr>
    <td>Story Op.2</td>
          <td>Lonely (ft.Taeyeon)</td>
          <td>2017</td>
        </tr>
        <tr>
    <td>Poet | Artist</td>
          <td>Shinin</td>
          <td>2018</td>
        </tr>
        <td>Poet | Artist</td>
          <td>Before Our Spring (우린 봄이 오기 전에)</td>
          <td>2018</td>
        </tr>
            </div>
      </table>

This is my CSS

.JjongSoloSongs{
  font-style: cursive;
}

I’m trying to make this table’s text font on replit into cursive but it doesn’t seem to work.

It’s ok I figured it out thank you~

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.