Bold Text Not Showing

Bootstrap Studio Help
1

Under the Theme options, I have Added a new text font “Poppins” and then selected it from the dropdown menu. I see everything change in the editor to reflect Poppins but when i select some text and mark it bold, it doesnt look any different.

Looking at the HTML I am seeing surrounding the text

If I reset the options and go back to the default font, I now see the changes for the bold text.

Am I doing something wrong ?

2

Hi welcome to the forum!

If you select some text, and then go to the options tab, and under the text category you choose font weight to bold - does this make the text bold?

Alternatively, you can add the class fw-bold to get the same result.

If the text does not become bold, then I have an idea what could be going wrong.

3

Hi, its going slightly darken than NON-Bold but its not what would call bold text at all
What is your idea ?

4

When you go to add a font in Bootstrap, there’s a drop down just above your selected font. I believe it’s called styles.

Make sure to toggle on the different font weights, I think you may just have installed one font weight so there’s no version of the font in bold.

Let me know if that is the issue, and if this doesn’t resolve this you may need some custom CSS to make the font as bold as what you are expecting.

5

@catkin Thank you, that has fixed the issue, I never even saw that option.
I have another question you may be able to help with…

Now I have all the font option installed, is ther anyway using the editor to select a line of text and make it say font-weight 300 without having to do it in the CSS sheet

6

Yes, Bootstrap offers utility classes. :smiley:

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-medium">Medium weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

bootstrap.com font-weight-and-italics

Never forget that BSS is based on Bootstrap. Browsing through the Bootstrap documentation is essential to get the most out of BSS.Best regards,

2 Likes