Bullet List Font Differs from Post Font

This topic is: resolved

Tagged: bullet font, list font

This topic has 24 replies, 4 voices, and was last updated 9 years, 8 months ago by Neeznoodle.

Viewing 20 posts - 1 through 20 (of 25 total)

1 2 →

Author

Posts
November 22, 2014 at 8:21 am #132490

Neeznoodle
Member

I just realized that the font for bullet lists is different than the font for the rest of my post's content. How can I change this so the font is the same as the content font?

I'm using the Mocha theme and it is the latest version.

November 22, 2014 at 8:22 am #132491

Neeznoodle
Member

This reply has been marked as private.

November 30, 2014 at 4:22 pm #133279

Neeznoodle
Member

Anyone?

November 30, 2014 at 6:08 pm #133281

anotherusername
Participant

Can you please link to your site?

Thanks in advance.

November 30, 2014 at 6:30 pm #133285

Neeznoodle
Member

I did in my second post, which is private.

December 5, 2014 at 4:46 am #133676

Neeznoodle
Member

Are there any mods who can help with this?

December 5, 2014 at 5:47 am #133683

eamonmoriarty
Participant

In the absence of a URL for your site I am looking at the Mocha Demo.

The body font is Droid Serif and this should be inherited into the other elements of the site unless it is changed in your style.css.

The style for your bullet points (unordered lists) is found on line 703 of style.css in the demo. You could specify a font there if you wish.

I could see better if I had a URL

Eamon Moriarty
EM Dzine

December 5, 2014 at 6:11 am #133687

Neeznoodle
Member

This is the code for the bullet lists in my style.css:

/* Ordered / Unordered Lists
------------------------------------------------------------ */

.entry-content ol,
.entry-content ul {
margin: 0;
padding: 0 0 25px;
}

.archive-page ul li,
.entry-content ul li {
list-style-type: square;
margin: 0 0 0 30px;
padding: 0;
}

.entry-content ol li {
margin: 0 0 0 35px;
}

.archive-page ul ul,
.entry-content ol ol,
.entry-content ul ul {
padding: 0;
}

How would I add font to this?

December 5, 2014 at 8:50 am #133698

eamonmoriarty
Participant

Try:
.entry-content ul {
font-family: arial;
}
to give you arial. Substitute arial with whatever font you are using for your post content.

Eamon Moriarty
EM Dzine

December 5, 2014 at 10:12 am #133704

Neeznoodle
Member

Thank you for the suggestion. Unfortunately, it didn't work. Here is the link to show you what I see:

Harry Potter Video Games

December 5, 2014 at 11:20 am #133709

eamonmoriarty
Participant

Can you point out the bullet points on that page. I can' see any.

Eamon Moriarty
EM Dzine

December 5, 2014 at 11:57 am #133712

Neeznoodle
Member

I just realized something! This post doesn't have lists but does have div tags. All the content in div tags is a different size and font than the regular content. I'm referring to the content under each game image.

December 16, 2014 at 12:26 pm #134684

Neeznoodle
Member

Help?

December 30, 2014 at 9:50 am #135671

Neeznoodle
Member

Can someone please help me with this? Any text that is in div tags looks awful, especially in Chrome browsers. I really want to get this fixed so that the text looks the same as all the other text on my site.

December 30, 2014 at 7:46 pm #135706

Victor Font
Moderator

The game images are all using in-line styles:

<a style="color: inherit; display: inline-block; text-decoration: none; margin: 1.5%; vertical-align: top; width: 17%;" href="#prisonerofazkaban"><span class="prthmb" style="-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; padding-bottom: 100%; font-size: 0; margin-bottom: 3px; overflow: hidden; background-image: url('http://ecx.images-amazon.com/images/I/51DEJ5CK1SL._SS300_.jpg'); background-position: center; background-repeat: no-repeat; background-size: contain; border: solid 1px #888888; border-radius: 10px;"> </span><span class="prnme" style="display: block; color: #000000; font: 12px/1.1 arial; margin: 3px 0; font-weight: bold;">Harry Potter and the Prisoner of Azkaban</span></a>

Notice that the span surrounding the text changes the font to arial. You need to remove those spans and you'll revert to your site's style sheet.

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

December 31, 2014 at 8:26 am #135745

Neeznoodle
Member

Victor - Thank you!

I didn't specific the font family for the in-line style. Any advice on how I change the style sheet so it won't do this?

January 27, 2015 at 5:46 am #138741

Neeznoodle
Member

Please, is there anyone who can tell me what I need to do to fix this? It really looks awful and is affecting a large number of posts on my site. I didn't do anything to specify the font for in-line styles and I don't see anything in the stylesheet.css file about it, and I have no idea how to change this.

January 27, 2015 at 7:48 am #138749
eamonmoriarty
Participant
Try adding the following to your style.css (perhaps just before the media queries):
```
.prnme {
    font-family: Droid Serif, serif !important;
}
```
I'm not sure if that will override the inline styles or not but give it a try.

Eamon Moriarty
EM Dzine
January 27, 2015 at 8:26 am #138758

Neeznoodle
Member

Eamon - Thank you for the suggestion. I might be putting it in the wrong place (I tried several) but it doesn't make a difference.

January 27, 2015 at 8:57 am #138762

eamonmoriarty
Participant

I'm seeing Droid Sans now in the titles under the thumbnails in the Table of Contents. Am I correct thinking that is where you want the font change?
If you are not seeing the change there, refresh or clear the browser cache. I have checked on Firefox, Google Chrome and Safari but not IE.

Eamon Moriarty
EM Dzine
Author

Posts