Change Font Family Based On Other CSS Value

font-family css
css font
best css font-family combination
font family types
css multiple font-family
verdana font family
font family: cursive
inherit font-family

I am trying to change the font-family of a class (.button) based on the font-family value of h6. I realize this can't be done with CSS, but couldn't find a solution directly through JS. I wish it were as easy applying the styles in a stylesheet, but the h6 value is gerenated dynamically by the user. Any ideas?

Thanks!

This is the easiest way to do it, since you're using jQuery.

Just for demonstration, you can see that the button takes the font of the H6 element after you click the button.

If you want this to happen immediately, remove the click() function by deleting the first and last line of the JS code (first code block).

$('.my-button').click( function(){
  var font = $('.my-title').css("font-family");
  var weight = $('.my-title').css("font-weight");
  $('.my-button').css('font-family', font);
  $('.my-button').css('font-weight', weight);
});
.my-title {
  font-family: "Lucida Handwriting";
  font-weight: bold;
}
.my-button {
  font-family: Verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h6 class="my-title">Hello World</h6>

<button class="my-button">Some Button</button>

Using CSS to set default font, The * selector, however, will apply the CSS font-family rule to the text of all and if you have any other CSS selectors that apply to the same elements, postscripting your CSS values with !important can be highly abused and  Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Note: Separate each value with a comma. Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

Have the potential font-family styles pre-set up in classes ahead of time and then use if/then logic to set the correct class on the element. The cornerstone of this is the element.classList property and its .add() method.

// Get references to the elements we need to work with
let h6 = document.querySelector("h6");
let btn = document.querySelector("button.button");

// Use if/then/else logic to set the button class
if(h6.classList.contains("foo")){
  btn.classList.add("newFoo");
} else if(h6.classList.contains("bar")){
  btn.classList.add("newBar");  
} else if(h6.classList.contains("baz")) {
  btn.classList.add("newBaz");  
}
/* Example of what the pre-existing classes might be: */
.foo { font-family:"Comic Sans MS"; font-size:2em; margin:.5em; }

/* New styles that will be used to override: */
.newFoo { font-family:"Times New Roman"; }
.newBar { font-family:sans-serif; }
.newBaz { font-family:monospace; }
<h6 class="foo">foo</h6>
<button class="button">Click Me!</button>

font-family, The font-family CSS property specifies a prioritized list of one or more Values are separated by commas to indicate that they are It is often convenient to use the shorthand property font to set font-size and other font related  The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

Your question isn't clear enough for me, but I tried to answer you with a more general solution for your problem!

In the demo below, I've created an input as if the user will type a value there, and a button with button id, and its font-size will be changed according to the value provided from the user within the input field

var sizeInput = document.querySelector("#sizeInput")
var myBtn = document.querySelector("#button")
var sizeFromTheUser

sizeInput.addEventListener("change", function() {
  // Update the variable's value based on the changed value from the user
  sizeFromTheUser = sizeInput.value
  // Change the font-size based on the given value
  switch(sizeFromTheUser) {
    case "h1":
      myBtn.style.fontSize = "2em"
    break;
    case "h2":
      myBtn.style.fontSize = "1.5em"
    break;
    case "h3":
      myBtn.style.fontSize = "1.17em"
    break;
    case "h4":
      myBtn.style.fontSize = "1em"
    break;
    case "h5":
      myBtn.style.fontSize = "0.83em"
    break;
    case "h6":
      myBtn.style.fontSize = "0.75em"
    break;
  }
  
})
  <input type="text" id="sizeInput" />
  <button id="button">This is text!</button>

Styling using language attributes, What is the most appropriate way to associate CSS styles with text in a particular Presentation styles are commonly used to control changes in fonts, font sizes and selector that matches the beginning of the value of a language attribute; a [​lang = ". A significant difference between :lang and the other methods is that it  The font-family property defines the font that is applied to the selected element. The font that is selected is not a single font face, but a “family”, and thus may be dependent on other typographic property values to select the correct face within the family.

font-family, The font-family property defines the font that is applied to the selected The font that is selected is not a single font face, but a “family”, and thus may be dependent on other For font-family there is no specific default or initial value; the initial white-space · widows · width · will-change · word-break · word-  By "display user entered text" do you mean the user is typing into a textbox? If so, you can attach a keypress listener that checks the length of the value of the text, then adjusts the font-size accordingly. Here's an example, though you will probably need to change the lengths and font-sizes to meet your needs: Working Demo

relative to the font size, Percentage values, such as setting a font-size of 110%, are also relative to the a relative unit based on the computed value of the font size of the parent element. on the html element to see how the other font-sizes change. Hello Everyone, I'm trying to (based on dashboard Image Overlay with Single Value from Splunk Dashboard Example app) make a dashboard, where results of searches will have different font color depends on value from search. For now I have: XML <dashboard stylesheet=layout.css> <label>Dash</label> <description>Display workflow status visually using an image, and grouped single value elements

How to set different font family based on text language?, If you have a meta or any other identifiable tag that holds the language value, but it is not a This question is not about WordPress but about css. So, if you have the english font as a standard you can easily change the font  The font-size property specifies the size, or height, of the font. font-size affects not only the font to which it is applied, but is also used to compute the value of em, rem, and ex length units. font-size can accept keywords, length units, or percentages as values.

Comments
  • It can be achieved with both CSS and JS. Could you update with a runnable minimal reproducible example?
  • You need to define a fallback font for cases like this. The issue is not clear, please elaborate on the problem that you're having
  • But, this doesn't do what the OP stated they need to do.
  • This code takes the font-family of a h6 element and applies it to a button, which is what I think the OP wants to do. If he wants the button to have a font different from the h6, then your answer will work for him. In any case, I believe this would help someone else, if not the OP.
  • Your code assumes that the button's font should be the same as the h6 and it assumes that this should happen on a button click. I don't get either of those things from the question.
  • Did you read this answer at all? The button click is for demonstration only. And like I said, this is what I THINK (perhaps if I write it in all caps, you would see it) the OP wants. I could be wrong. You could be right. No one is forcing anyone to use an answer. The OP will take what he needs and ignore the others. If this doesn't help the OP, it would help someone else in future.
  • This was pretty much what I was trying to do! I adjusted the function a bit and got stuck trying to add "font-style" and "font-weight". $(document).ready(function () { var font = $('h6').css("font-family"); var style = $('h6').css("font-style"); var weight = $('h6').css("font-weight"); $('.wp-block-button__link').css('cssText','font-family:'+ font); // $('.wp-block-button__link').css('cssText','font-style:'+ style); // $('.wp-block-button__link').css('cssText','font-weight:'+ weight); });
  • Why not show your answer using font-family instead of font-size since the question was about font-family?
  • His question is very unclear for me, I didn't actually know what he precisely means. Especially when he mentioned the h6, I was wondering; Did he mean <h6>, Hmmm... not really, maybe he meant the font-size instead of the font-family and he wanted the <h6> size? LOL, I made too many assumptions before answering this @ScottMarcus! :D