Style Sheets

Report · Apr 29, 2017

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

Report · Apr 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 & Moderator

Report · Apr 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'

Report · Apr 30, 2017

If you care to post a link to your online page, I'm sure we can help you sort this out.

Without seeing your entire code, it's all just guesswork.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 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

Report · Apr 30, 2017

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>

<title>Untitled Document</title>

<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 & Moderator

Report · Apr 30, 2017

Don't use too many custom web fonts on pages. It really slows your site down.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 30, 2017

Nancy

I did manage to get it to work and I only use two Google fonts. Shows as Times New Roman in DW Design view. Bold and regular don't seem to display much differently. Do you have an answer as to why two styles for the first font in my Style Sheet and why it's not available if one or the other is deleted. I also noted that the font in the second style version is the one that changes what is displayed on the page. I set the first one to Arial

Thanks

Alan

Report · Apr 30, 2017

Design View is not going to display your external web fonts. Use Live View instead.

Duplicating styles merely overrides your earlier ones. If the first style isn't working, then something is amiss in your code or conflicting with another style in the cascade.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 01, 2017

Nancy

If I change the font weight in Live View from normal to bold, I don't see any difference. I'm not sure what you mean by duplicating styles.

Thanks

Alan

BTW those were screen shots of Safari I posted not of Design views.

Report · May 01, 2017

When you get fonts from Google, you must specify which variant you want to use -- Bold or Normal. Which one did you select? That's the one you will see.

If you duplicate a style in your CSS code.

.stylechapter { }

The 2nd one overrides the 1st.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator