How do i change font and font size of a button?

How do i change font and font size of a button?
0

#1

I’ve tried the obvious to no effect “font-size:”. How do I actually go about changing the font size and font of a button class?


#2

Hey @bmarz. You can use button {font-family: 'Arial'; font-size: 20px;} like this or use parent div and inside parent put button.

It may help.

Thank You
Rabin


#3

Since you have a class called “numeral” for the number buttons, you could add the font-size property as shown below. I used “em” because you are using that in your other css classes.

.numeral {
  font-size:0.8em;

#4

It should work just fine when styling your button tag.

It’s not actually a class so you shouldn’t put a dot in front of it. button{...} instead of .button{...}


#5

Maybe I’m missing it, but I don’t see font-size anywhere in your code, so nothing should be overriding a font size you put in. (I assume you’re using only CSS and not Bootstrap?)

If you can add it and it still doesn’t work, keep it in the code so we can see what you’re trying to do.

If something is interfering, it may just be a matter of upping the point count by using an id instead of a class or using a parent-child pair as the selector. You can, as a last resort add !important to the style.


#6

This does not work, which is why it’s not in my code. Nothing I tried worked, which is why I’m asking.

I’ll go back and add it in, so that you can see that those do not work.


#7

So I have added back “font-size: 2em;” and instead of just increasing the font size it scales the whole stupid button and ignores the size constraints I put on the button.

This is so frustrating. Why can I not just change the font-size?


#8

You’ve set the width and height in ems, so the button will scale relative to the font size. It’s 5x the font size, so if you set the font size to 2em, the button will be width/height 5x that for example.


#9

Gah, ok, once again ignorance biting me in the butt. So then my question is, how do I scale my objects so that they appear the same, or close to the same on all devices? This is why I was using em, as it appeared to me to be the best option to maintain the look and feel. And for the most part it did, as it was easily usable on my phone as well as on my 22" monitor.


#10

First of all, use rem; rem is relative to the root font size, so will stay consistent. em will be relative to the parent of the current element you’re applying it to. As an example, ems are really useful if you want to do superscript/subscript, where you want the text to be small, but relative to the normal sized text it sits next to.

Second is that you have an issue with the sizing in this case because you want each button (bar the 0) to be the same height and width but also keep it all relative and responsive - basically, you want each button to fit into a perfect square, but not use pixel units. This is a really common issue, and the normal way to get around this is to wrap each of the elements in another one, and use a trick that leverages the padding-bottom property. CSS by default just tries to expand containers to fill the space, so you have to fight against that. It’s a bit difficult to explain, you need to see it in action really:

This uses % sizing, but same thing applies: https://spin.atomicobject.com/2015/07/14/css-responsive-square/

Here’s one using flex, exactly the same trick: https://stackoverflow.com/a/46550527


#11

Can I ask which browser you’re using? Changing the button’s font-size directly with px works perfectly fine in Chrome and Firefox. If there’s some popular browser that ignores font-sizes by default I feel like people should be aware of it.

For a project like this you can scale with, fittingly, transform: scale.

@media screen and (max-width: 462px){
  main{
    transform: scale(0.5);
  }
}

Keeps everything nice and intact.


#12

That’s not the issue, he’s not using pixels & he’s not trying to scale.


#13

"This does not work, which is why it’s not in my code. Nothing I tried worked, which is why I’m asking.

I’ll go back and add it in, so that you can see that those do not work."

in reply to

"Hey bmarz. You can use button {font-family: ‘Arial’; font-size: 20px;} like this or use parent div and inside parent put button.

It may help.

Thank You
Rabin"

Here he’s saying that changing font-size doesn’t work. He then briefly makes it work with em. That seems to suggest that for whatever reason, changing font-size with pixel doesn’t work. I’ve seen Microsoft Edge ignore vmax but work with vmin so maybe somewhere out there is a browser that, however ridiculous, doesn’t change the font-size of a button with px.

“So then my question is, how do I scale my objects so that they appear the same, or close to the same on a`ll devices?”


#14

His issue is that he’s using ems to size the button, not the unit used for font size inside the button. Because the button was sized in ems, changing the font size changes the size of the button: it’s irrelevant what unit is used for the fonts. The issue is to do with the way the buttons are sized, and leads to the difficulties inherent in keeping a consistent [circular] shape that grows and shrinks according to screen size. Using transform: scale is not a workable solution here because you need to define one or multiple media queries, whereas ideally the whole calculator should just naturally scale according to screen size.


#15

I am using Firefox 56 and 57. No changing with pixels doesn’t work in this instance, maybe because i was already using em? I avoid using pixels anyway because it is so inconsistent in scale between screens. rem appears to be working, and when I have time tonight I’ll look into the links DanCouper posted. So thank you Dan, rem looks to be doing what I want.


#16

The first question I asked was still relevant because he explicitly said that changing font-size was not working and it was that problem that started the thread in the first place. As I said, changing the font-size directly on a button worked on Chrome and Firefox but he seemed to imply that it had no effect whatsoever. Is it too much to ask, out of personal curiosity, which browser he’s using? It’s either a browser issue or a specificity issue, and I was just curious.

And since when is using media queries a bad thing? It works perfectly fine if you’re mindful of breakpoints. It just happens to be a different solution and a different type of resizing. It’s similar to the differences between container and container-fluid in bootstrap, and both are included for a reason. Plus, even with rem and vw some people might still want to or have to use media queries.


#17

It’s neither browser nor specificity: again, that’s not the issue. The font size changes fine, no problem. If you change the font size on the pen, the font size changes as expected, it just also happens to change the size of the button as well.


#18

I asked the question knowing it wasn’t about the current issue, but it was still a possible issue. I asked politely and inquired for him to give more details if he so wished. I know the font changes fine, but if you read the thread title and original post, it seemed to indicate otherwise. The issue became about the button not fitting in AFTER he managed to change the font size. You had no reason to dismiss a perfectly valid question in a forum dedicated to people knowing the nuances of web development.


#19

That’s fine, I don’t mean to be so dismissive, it’s just what you’re saying isn’t very helpful - as you say “it was still a possible issue”, except it wasn’t an issue if you looked at his code and what he was trying to achieve. Anyway

@bmarz - here’s a possible solution with the button fix - note using grid rather than flex, which can make things easier (sorry to dump more things in, but it allows the layout in a way that flex doesn’t) https://codepen.io/DanielCouper/pen/BmwMLg?editors=0100