- This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
Viewing 10 posts - 1 through 10 (of 10 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Font change with javascript?
Before I start spinning my wheels, I wanted to know if it was possible to change the font of already rendered text via javascript or jquery. I am very new to js and just wanted to make sure it was possible. For example, If I have a heading in styled in font called supercool.ttf, is it possible to change it to alsocool.ttf every five seconds or so?
Instead of changing the actual font source, you would just be changing the class of the element. Below is a super basic example of what I mean. Probably not the best way to do it, just showing you that it’s possible.
CSS:
.some-font { font-family: ‘something’; }
.another-font { font-family: ‘something’; }
HTML:
jQuery:
$(‘h1’).removeClass(‘some-font’).addClass(‘another-font’);
Like all these guys mentioned there’s a few ways. The example below is using setInterval along with toggleClass()
So if I were multiple classes would I need multiple functions? Or could I rope it all into one function with “for” and “while” statements?
How many classes are you wanting to switch between?
Doesn’t really matter the quantity now, I am trying to learn without getting it handed to me which I know isn’t all that possible in this situation seeing its specificity. I just want to know if it is possible/maybe a step in the right direction.
Well (this === LULZ)
because i just came up with a really weird solution. I’ll post my codepen here in a minute when im done coding all these classes.
And you still can use
$(element).css(‘font-family’, ‘Tahoma’);
There’s a lots of ways how can you change fonts/classes, ‘switch’, ‘loop’, etc.
Here is the solution i came up with. I will comment what i did so you could easily understand.
Hey, @CrocoDillon came up with a nice solution as well. You can check out his CodePen.