how to make font thicker then 900 using css

user_14376347 0
Viewed 432

I want to make my font super thick due to the background colour of my friends image that is in the header of the website. I found this online, but it is not working unfortunately. is there any other way to do this?

h1{
  text-shadow: 1px 0 #888888;
  letter-spacing:1px;
  font-weight:bold;
}
<h1>MAKE IT BOLD</h1>

this above is not working and keeps it around the same standard thickness I have already.

please let me know another solutions.

css html javascript
4 Answers

use text-stroke

.box {
  letter-spacing: 5px;
  font-size: 30px;
  font-weight: 900;
  font-family:sans-serif;
}
.th {
  -webkit-text-stroke: 3px;
  text-stroke: 3px;
}
<div class="box">HELLO WORLD</div>
<div class="box th">HELLO WORLD</div>

Or a lot of text-shadow:

.box {
  letter-spacing: 5px;
  font-size: 30px;
  font-weight: 900;
  font-family:sans-serif;
}
.th {
  text-shadow:0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px;
}
<div class="box">HELLO WORLD</div>
<div class="box th">HELLO WORLD</div>

user_86203330

Just because why not drop-shadow filter?

But forget this answer, text-stroke is the way to go.

h1{
  letter-spacing:1px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight:bold;
  filter:
    drop-shadow(1px 1px 0 #000)
    drop-shadow(-1px -1px 0 #000)
    drop-shadow(1px -1px 0 #000)
    drop-shadow(-1px 1px 0 #000)
}
<h1>NOW THAT'S BOLD</h1>

user_30132790

Another way is by using text-shadow to add on the text

.bold {
  letter-spacing: 1px;
  font-size: 1em;
  font-weight: 900;
}

.extra-bold {
  text-shadow: 0px 1px, 1px 0px, 1px 1px;
}
<div class="bold">Make it bold</div>
<div class="bold extra-bold ">Make it bold</div>

user_102517060

Consider using SVG filters

h1{
  text-shadow: 1px 0 #888888;
  letter-spacing:1px;
  font-weight:bold;
  filter:url(#f1)
}
<h1>MAKE IT BOLD</h1>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="0" height="0"  >  
<defs>
  <filter id="f1">
  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" >
        
    </feGaussianBlur>   
            <feColorMatrix in="blur" type="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
</defs> 

</svg>

The same combination of filters but instead atop operator is used xor operator

h1{
  text-shadow: 1px 0 #888888;
  letter-spacing:1px;
  font-weight:bold;
  filter:url(#f1)
}
<h1>MAKE IT BOLD</h1>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="0" height="0"  >  
<defs>
  <filter id="f1">
  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" >
        
    </feGaussianBlur>   
            <feColorMatrix in="blur" type="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 24 1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="xor"/>
        </filter>
</defs> 
</svg>

user_73948710
Related