Text-Only Roll Button

I'm trying to create a text-only roll button similar to 5th Edition OGL. The ultimate idea will be for it to change colors when you hover over it. However, I'm having problems getting out of the gate on this one. I know I need to override the designation of the dicefontd20 font-family in the ::before pseudo-element, replacing it with Palatino. Thus I am trying: button::before { content: "" !important ; font-family: "Palatino" !important ; } But this isn't doing it.  In fact, I'm having trouble styling anything. For example: .charsheet button[type=roll].sheet-textbutton { font-size: 40px !important; } Along with...    <button type="roll" class="sheet-textbutton" name="possibility-roll" value="&{template:possibility} {{previousroll=?{PreviousRoll}}} {{newroll=[[?{PreviousRoll}+({1d20!10!!20cs10cs,10 + 0d0}kh1)]]}}" /> ...does absolutely nothing. I'm pretty sure that I'm missing something that is really simple here, but - as I mentioned in a previous post - my CSS skills are sorely lacking. Any help would be appreciated.

When in trouble, always use the inspect tool to see if your classes are applying. Copy-pasting your example into an empty sheet seems to work for me. There's a roll button, and its font size is 40px. Why do you want to override the font, but then set the content to empty? The font won't matter if the content is empty? Buttons are not self-closing elements. You should use "<button ATTRIBUTES>stuff</button>", not "<button ATTRIBUTES />". (Unimportant for the CSS, but: you want name="roll_ABILITYNAME" in order for %{charname|ABILITYNAME} to work). (Don't use !important unless absolutely necessary.)

To avoir using the dreaded "!important", set a class to your button and set the content for this class "button.sheet-mybuttonclass::before ... content:""'. You won't need !important.