Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: technicolorpunky on February 24, 2020, 03:18:56 AM

Title: Bold fonts appear the same as regular font.
Post by: technicolorpunky on February 24, 2020, 03:18:56 AM
Hi everyone!

I recently installed a theme on a forum I'm working on, and the font it uses is Sans Serif:

/* Set a fontsize that will look the same in all browsers.
---------------------------------------------------------- */
body {
background: #1D2225 url(../images/custom/main2.png) no-repeat 100% 0% / cover;
font: 300 13px/1.5 'Oxygen', "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 0;


Unfortunately, when I make something bold using bbcode, it doesn't appear bold at all.  Is there some sort of way to make it appear - for lack of a better word - bolder?  Do I need to change the font?  It appears mostly to be Oxygen from what I can tell, that word is repeated amongst my index.css file.  I still want Sans Serif because it's what I prefer.

The small snip I attached is a preview from a post I'm typing up - I put the [ b ]  [ / b ] around February 2, 2020, and it looks exactly the same as the rest.
Title: Re: Bold fonts appear the same as regular font.
Post by: Illori on February 24, 2020, 04:52:06 AM
link to the forum where a post is having bold bbc? most likely it is not defined in the css or not defined correctly.
Title: Re: Bold fonts appear the same as regular font.
Post by: technicolorpunky on February 24, 2020, 05:47:12 AM
http://dobs.poison-lesson.org/forum/index.php

If you check out the 'Rules' post in the first board, the very first line stating IMPORTANT is all in bold.
Title: Re: Bold fonts appear the same as regular font.
Post by: Antechinus on February 24, 2020, 05:49:20 AM
We can't access it. You have the site in maintenance mode.
Title: Re: Bold fonts appear the same as regular font.
Post by: technicolorpunky on February 24, 2020, 02:02:59 PM
My apologies, completely forgot I did that a few days ago!  It should be accessible now.
Title: Re: Bold fonts appear the same as regular font.
Post by: Illori on February 24, 2020, 02:12:36 PM
can you link to the exact post/topic? I cannot find one matching your screenshot.
Title: Re: Bold fonts appear the same as regular font.
Post by: technicolorpunky on February 24, 2020, 02:27:10 PM
I hadn't yet posted that one. Check out the Dusk on Bourbon Street Rules post - the very first centered line stating IMPORTANT is in bold.
Title: Re: Bold fonts appear the same as regular font.
Post by: Shambles on February 24, 2020, 03:26:41 PM
I increased your font-weight [from 500] to 999 and it looks bold.

(https://i.imgur.com/7AZ0IPc.jpg)
Title: Re: Bold fonts appear the same as regular font.
Post by: technicolorpunky on February 24, 2020, 04:02:33 PM
I've never dealt with font weight, I'll do that when I get home from work. Thank you!
Title: Re: Bold fonts appear the same as regular font.
Post by: Antechinus on February 24, 2020, 04:29:33 PM
The problem is that bold and strong tags are defined as font-weight: 500; but Arial does not support that font weight.

b, strong {
    font-weight: 500;
}


Come to think of it, Arial doesn't support 300 weight either. Offhand I don't know about Helvetica, but unless you're on a Mac you won't get Helvetica anyway. I think Bikken and Mayday used Macs, so I suspect the font weights worked with Helvetica and it didn't bother them.

body {
    font: 300 13px/1.5 "Arial", "Helvetica", sans-serif;
}


Solutions for Windows and other non-Mac things: either change the bold and strong tags to call 700 weight, or change the font to one that supports a range of weights (Roboto, for example).

ETA: Note re the 999 thing - that's not a weight that will be used in practice either. It will automatically round to the nearest supported weight, which will be 700 (standard bold weight since Noah was a lad).
Title: Re: Bold fonts appear the same as regular font.
Post by: Antechinus on February 24, 2020, 04:49:16 PM
By the way, they did request that anyone still using their themes remove the link to their old site. The domain has been taken over a people running hookers in Las Vegas, which is not something Bikken and Mayday particularly want to give free traffic to.

In index.template.php:

Code (Find) Select
<span>Design by <a href="http://www.dzinerstudio.com" target="_blank">DzinerStudio</a></span>

Code (Replace) Select
<span>Design by DzinerStudio</span>

:)
Title: Re: Bold fonts appear the same as regular font.
Post by: Shambles on February 24, 2020, 05:01:18 PM
^ good point  :o
Title: Re: Bold fonts appear the same as regular font.
Post by: Antechinus on February 24, 2020, 05:06:23 PM
Y'know it just occurred to me I could write a "mod" for that, just to be kind to newbies who are using Dziner themes. Could have one edit to index.template.php for any theme, with error='ignore" or error="skip". If you're running half a dozen Dziner themes and several other custom themes and default, just install the mod on all and it would sort Dziner links without touching anything else.
Title: Re: Bold fonts appear the same as regular font.
Post by: technicolorpunky on February 25, 2020, 01:24:27 AM
Thank you, everyone!  I am on a Mac, but others who will be using the forum will be on Windows.  I'll first attempt the weight change, and I will also remove the link - I didn't even think about the link to their site!

I appreciate everybody's help.  I'm usually pretty good with the things I already know, but sometimes things just throw me through a loop!

Thank you, again! :)
Title: Re: Bold fonts appear the same as regular font.
Post by: technicolorpunky on February 25, 2020, 03:50:08 AM
It works!  Much appreciated, everyone!