Skip to main content
E
English100
Inspiring
April 29, 2017
Question

Style Sheets

  • April 29, 2017
  • 1 reply
  • 1525 views

In my CSS I have two entries for a chapter title style:

<style> 

  

.stylechapter {

  font-family: "Dancing Script";

  font-size: 18px;

  color: #983200;

  text-align: left;

  font-weight: bold;

  font-style: normal;

  letter-spacing: 4px;

}

.stylechapter {

  font-family: Dancing Script;

  font-size: 18px;

  color: #983200;

  text-align: left;

  font-weight: bold;

  font-style: normal;

  letter-spacing: 4px;

}

The only difference is that the font is in parenthesis in one of them. If I delete one or the other styles then the chapter title style is no longer available.

Any idea why I need both styles?
Thanks

Alan

This topic has been closed for replies.

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 29, 2017

Wrap 2 or more word font names with quotes and 1 word font names without them.  Below is the recommended font-family (with fallback fonts separated by commas) for all Win/Mac systems

'Dancing Script', 'Brush Script MT', cursive, serif;

Nancy

Nancy O'Shea— Product User & Community Expert
E
English100Author
Inspiring
April 30, 2017

Nancy

I've tried that and it still doesn't work. Why do I have two entries for the Chapter style? As I said in my first post, if I delete one of them, then that style is no longer available. Do I have to put the same font name in both styles?
Thanks

Alan

PS These are all my fonts. The only two that display correctly are 'Quicksand', sans-serif and 'Open Sans Condensed'

<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow|Poiret+One|Quicksand|Varela|Open+Sans+Condensed|Cookie|Satisfy|Meera+Inimai|Dosis|Josefin+Sans|Dancing+Script|" rel="stylesheet" />

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 30, 2017

Sorry Nancy I can't do that as it's covered by trade secrets. I did manage to get another font to work and that was Dancing Script and the only way it worked was if I closes the document and then displayed the page in Safari.

Alan


Did you get the Bold variant from Google?  You'll need that to use Bold in your projects.

As you can see, this works fine for me in Live View.  Works also In Firefox and Chrome.

Here is the code I'm using.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">

<style>

.stylechapter {

    font-family: 'Dancing Script','Brush Script MT',cursive;

    font-size: 18px;

    color: #983200;

    text-align: left;

    font-weight: bold;

    letter-spacing: 4px;

}

</style>

</head>

<body>

<h1 class="stylechapter">This is Bold Dancing Script from Google Web Fonts.</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia asperiores numquam repellat tenetur aperiam voluptatem illo aspernatur vitae sapiente cum dicta, maxime eveniet. Eaque, molestias architecto in corrupti ratione expedita.</p>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices