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

Unike text color and size, You can't change letter spacing and word spacing using attribute=style property. You should either change them while creating by changing pen width or you should change them in body of css.

Answer 2

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 3

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 4

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>

Answer 5

The font-feature-settings property allows control over advanced typographic features in OpenType fonts. These settings solved in my case:

body{
  font-variant: none;
  font-feature-settings: "c2sc", "smcp";
}

Answer 6

JS approach: get all text nodes and apply classes

1. We're first selecting all text nodes.
2. Then we loop through them and check their parent element's computed style properties via getComputedStyle(textNode.parentNode)
3. define css class rules

let textNodes = textNodesInEl(document.body) 

// add font-family classes
textNodes.forEach(text=>{
  let el = text.parentNode;
  let style = window.getComputedStyle(el);
  let fontFamily = style.getPropertyValue('font-family');
  let fontStyle = style.getPropertyValue('font-style');
  let fontWeight = style.getPropertyValue('font-weight');
  let className = 'font__'+fontFamily.replaceAll(' ', '_').toLowerCase()+'__'+fontStyle;
  let classNameFontWeight = 'fontweight__'+fontWeight;
  el.classList.add(className);  
  el.classList.add(classNameFontWeight);  
})


/**
 * Get text nodes in element
 * based on:
 * https://stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page#10730777
 */
function textNodesInEl(node) {
    let textNodes = [];
    for (node = node.firstChild; node; node = node.nextSibling) {
        if (node.nodeType == 3) {
            textNodes.push(node);
        }
        else {
            textNodes = textNodes.concat(textNodesInEl(node));
        }
    }
    // filter empty text nodes
    textNodes = textNodes.filter(node => node.textContent.trim())
    return textNodes;
}

body {
  font-family: Georgia;
}

h1 {
  font-family: "Arial";
  font-weight: 700;
}

h2 {
  font-family: "Verdana";
  font-weight: 400;
}

.fontweight__700{
  text-transform: uppercase
}

.font__verdana__normal{
  letter-spacing: 0.05em;
  color:red
}

.font__verdana__italic{
  letter-spacing: -0.05em;
  color: green
}

<h1>Heading 1</h1>

<p>Lorem ipsum dolor sit amet, <span style="font-family:verdana">consectetuer </span> adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. <em style="font-family:verdana">Nulla consequat massa quis</em> enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>

<h2>Heading 2</h2>

<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>

<table>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td><span style="font-family:verdana;">Col 3</span></td>
  </tr>
</table>

You could also add other property values like font-style or font-weight for more specific filtering.