Text styles thumbnail grid

[KW1]

Hi, I have embedded a different font for links as a hover, so that it is displayed in capital letters when hovering over it.

/*hover font*/
a:hover {
font-family: 'font-name';
text-transform: uppercase;
}
.current-menu-item a{
font-family: 'font-name';
text-transform: uppercase;
}

Now I would like to have this effect within the thumbnail grid (for the categories and filters). What is the best way to do this?

And do you have any general ideas as to why the baselines of the two fonts jump and what I could do about it? The two fonts already have the same settings, x-height etc.

Many thanks in advance!

[KW1]

found a solution:

/*font change thumbnail grid "categories"*/
.lay-thumbnailgrid-filter-anchor:active{
font-family: 'font-name'!important;
text-transform: uppercase!important;
}

.lay-thumbnailgrid-filter-anchor.lay-filter-active{
font-family: 'font-name'!important;
text-transform: uppercase!important;
}


.lay-thumbnailgrid-filter-anchor:hover{
font-family: 'font-name'!important;
text-transform: uppercase!important;
}


/*font change thumbnail grid "filter"*/
.tag-bubble.lay-tag-active {
font-family: 'font-name'!important;
text-transform: uppercase!important;
}
 
.tag-bubble:hover {
font-family: 'font-name'!important;
text-transform: uppercase!important;
} 

Does anyone else have an idea about the baseline problem? My fonts are jumping a bit too much haha

[arminunruh]

i think the jumping is because some positions inside of the font itself
maybe you can work around it by using
css:

position: relative;
top: -2px;

or top: 2px;

or bottom: -2px;

on the css that shows the other font