Is there anyway to apply letter and word spacing to a "font" using css?

Question

I have a custom font with code like this -

@font-face {
font-family: 'classylight';
url : 'some path';
font-weight:normal;
    }

I want to set some values exclusively for this font everywhere on the site like letter spacing, word spacing, and other styles. I wanted to reduce unneccessary process, and looked for attribute=style property.

I tried -

body [style="font-family:classylight"] {
letter-spacing:50px;
word-spacing:-20px; 
}

It's not working. Can anyone help? I would like to use only css for this. If there's no possibility in css, please refer with javascript, jquery.

PS - I'm not looking for answers which adds styles directly to body part like

p {
font-family: classylight;
letter-spacing:50px;
word-spacing:-20px; 
    } 

Answer 1

Use rem and em for all the letter spacing, word spacing, etc. And for the font-weight, it is because the initial declaration is overwriting your own font-weight.

Answer 2

you might find this useful i guess.. this are the common most use css text property

<h1 style="

text-align: center; 
font-size: 25px;  
color:#FF0000;      
font-family: Arial Black,Arial,Helvetica,Verdana,Trebuchet MS,Comic Sans MS,sans-serif;    
font-style: normal;   
font-weight: 1000;
background-color: #D3D3D3; 
line-height: 3;

">TEST 123</h1>

also about your question "font-weight:bold" not working perhaps it being overwritten by other value such as < h1 > which make text already huge...

Answer 3

So you can't really use letter-spacing in font declarations. What you could do however, is create a class which has the letter spacing you want, and then add the class to the HTML element. Like so:

@font-face {
   font-family: 'Roboto';
   url : 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap';
   font-weight: normal;
}

@font-face {
   font-family: 'Open Sans';
   url : 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap';
   font-weight: normal;
}
        
.roboto-norm{
   font-family: 'Roboto';
   font-weight: normal;
}
        
.roboto-norm-ltr-spc{
   font-family: 'Roboto';
   font-weight: normal;
   letter-spacing: 0.25em !important;
}
        
.opensans-norm{
   font-family: 'Open Sans';
   font-weight: normal;
}
        
.opensans-norm-ltr-spc{
   font-family: 'Open Sans';
   font-weight: normal;
   letter-spacing: 0.25em !important;
}

<label class="roboto-norm">Normal roboto letter spacing</label>
<br><br>
<label class="roboto-norm-ltr-spc">Custom roboto letter spacing</label>

<br><br>
<br><br>

<label class="opensans-norm">Normal open sans letter spacing</label>
<br><br>
<label class="opensans-norm-ltr-spc">Custom open sans letter spacing</label>

As for the font-weight: normal part, what you're doing with the @font-face rule is that you're declaring the font. It's basically a variable of sorts, which you'd then be referencing when styling the HTML elements. The weight of the font is part of that.

The snippet below should make it clearer. What I've done is that I've imported 2 styles of the Roboto font, the first being of regular weight, aka 400, and the other of bold weight, aka 700.

@font-face {
   font-family: 'Roboto';
   url : 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap';
   font-weight: normal;
}
@font-face {
   font-family: 'Roboto';
   url : 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap';
   font-weight: bold;
}
    
*{
   font-family: 'Roboto';
}
    
#normal{
   font-weight: normal;
}
#bold{
   font-weight: bold;
}

<label id="normal">normal font</label>
<br><br>
<label id="bold">bold font</label>