and I was wondering why it was not working. thanks for the heads up, especially months after the original upload. do you have any alternative for a website?
I can never seem to absorb this info which for you isn't a bad thing because I means I always gotta keep watching this. its helped me heaps so huge props to you for making this so simple and easy to follow.
you got yourself a new supporter, spent all of yesterday trying to figure out why uploading the file of the font and importing in the css worked half of the time. thanks a lot
I used transfonter and it unfortunately didnt work for me.. :( only issue I'm recognizing is that when I'm enter the "font-family" portion the text isnt changing color so I'd assume for some reason that might be an issue? any ideas? thanks in advance!
When i do this for a sub/follow message, the custom text only works for the users name that followed or subbed, not the after part. {name} is now following or {name} just subscribed; the "is now following" or "just subscribed" part is still in the old font. I tried looking in at HTML and CSS for both tabs and have been trying to get the rest of the text to also be displayed in the font. Not sure where the option is to make the rest of the message in the font i want and not just the {username}
@@iberryboi I'm having this issue too! {name} and {amount} are the correct font but the middle text ('cheered x') will be normal text not with the special font im not sure how to fix it
having the problem another commenter noted, where the white text after {name} ends up being the default font still, so my custom font IS successfully applying to the first word, but the "is now following!" etc is not. any ideas on how to fix this without just removing the following text?
Hey dude, I looked through the comments but couldn't get an answer. It only changes the name of the actual name not the entire message for example "Kami has followed you" ? I tried the #alert-message { font-family: 'font-name' !important; } but this isnt working. Any thoughts?
Hi! Thank you so much for this video. It works perfectly. 👌 As you said, there's a lack of information about how to include our own fonts in Streamlabs Alert Boxes. On the other hand, I tried to apply your method on the Streamlabs *Follower Goal widget and it doesn't work.* Yet, I thought it was possible to include my own font since a specific field is available but when I include the code line, the bar has a bug in my OBS. Do you know how to fix that?
don’t think so tried ttf and otf or hobeltet called. it’s just said there is no file uploaded. Weird, but I fixed it with using another website to get the files needed
The code i'm getting from fontsquirrel is giving me times new roman. In fact, the demo page in the kit pulls up times new roman. i'm using the same font file that DEFINITELY installed the correct font to my computer.
@@iberryboi i've done a ton more digging, and it seems it's the specific font i'm using. I even found an alternate version, which also, entirely coincidentally, didn't work. But all the other ones I've tried DID work.
you Sir are awesome ..i only have one problem for some reason i cant get rid of a blue glow around the text can you help ...if it were white that would be great or none at all
actually if you're using SLOBS then with streamlabels any fonts downloaded onto your pc will transfer into the software but thats only for labels not alerts.
Thanks a bunch! Put Andy STD BOLD as the font for next I play Terraria, as a backup until I can figure out how to get it working -the- with the blocks animations preset for streamlabs chatbox, but idk if you can put any customization into that, perhaps another year will go by and I'll get to it :P
Did you add !important? Is the font name correct? Did you check the embed css button on the generator settings? Send me screenshots on discord or email.
Sorry to be that guy, but I'm having some trouble. Tried this for my new Follows and for Bit donation, and now no notification shows up when I preview it. Is there something I'm missing?
@@iberryboi Ohh that explains that. I'll look into some other ones then, thanks for clearing that up. Edit: Sure enough, that was the issue. Tried Transfonter and that worked right away. Thanks again for the guide
@@zombieplasticclock i guess we broke font squirrel sending too much traffic there 🤣 oh good! Glad that worked I'll have to pin comment to let others know
thanks for the video!! I could only get it to work on the credits roll and not the alert box. the second “url” (on the 4th line) is highlighted red. any help would be appreciated :)
Yes that should be an easy fix! What file type is your font file? Is the code written exactly as copied? Are you missing any semicolons or para theses somewhere? Maybe you could send me a screenshot on discord or something
@@iberryboi Thanks! I already figured it out, I pasted the same code in the obs custom css section :D. Either way, I think some people will find helpful a tutorial about that!
@@iberryboi thank you sir. Love to see a video on animated letters that pull in the new follower from streamlabs. Like a cool animated After Effects text animation
Streamlabs doesn't allow you to edit the CSS for stream labels. If you want custom font you would have to use stream elements and add it as a browser source in streamlabs.
@@snakerooni font-size: {sliderName}; put the custom field name between brackets. I show an example at the end of this video: ua-cam.com/video/HtP9z_ZBFfE/v-deo.html
Thank you so much Legend!!!!!!! Do yo know how can I set a custom font size for the {amount} and a custom font size for the {gifter}? Thanks again you saved me a lot of hours!
H berry, would you be able to explain how to do this with a follow/sub goal bar as well? feel like it would capture the asthetic of my stream even more! it would be very appreciated!
If you want to try it now, see if this works, use the same steps but apply the font-family to the :root in the goal bar CSS editor. :root{ font-family: 'name' !important; }
Tried this, unfortunatley it's not changing the font, in fact, it changes the entire goal bar completly to a black box with white text, not sure if it has to do with the other bar being HTML based or not? that's my guess.
incredible, you're so underrated!! How do I change the size of the font after applying that script though? Using the slider won't work. thanks again! EDIT: it's ok the slider works but only on the streamlabs website where the code was uploaded (i.e. not in the actual streaming app itself).
Hey everybody font squirrel is having issues right now, please use a different generator like transfonter for it to work, thanks!!
and I was wondering why it was not working. thanks for the heads up, especially months after the original upload. do you have any alternative for a website?
@@messinismarios
Np, yes try transfonter.org/
Check Base64 encode to on
@@iberryboi oh sorry, you mentioned it in the initial comment - I didn't see it. thanks a ton
it is working for me
@@eduardoaraya7092 Oh good it's back up thnx
Legend. This deserves way more views for sure.
Holy shit MMA On Point in the comments. Legends.
Ha, nice, got MMAOnPoint up in here. And yeah, video is super helpful.
I can never seem to absorb this info which for you isn't a bad thing because I means I always gotta keep watching this. its helped me heaps so huge props to you for making this so simple and easy to follow.
tyvm! That seems to be the case with alot of people 🤣
This deserves more love. Thank you SO MUCH! I had so much trouble trying to figure this out on my own and you made it so simple!
you got yourself a new supporter, spent all of yesterday trying to figure out why uploading the file of the font and importing in the css worked half of the time.
thanks a lot
Thanks my guy! Glad i could pass on the knowledge
ive been looking forever to find the solution to this so thank you! you are literally the one person on the internet that made a video about this!
THANK YOU SO MUCH!!! NOBODY WAS HELPFUL UNTIL I FOUND YOU THANK YOU SO MUCH!
I'm very surprised this doesn't have more views, thank you so much!
i know this is 3 years old but man.. this will always be helpful. Thank you so much for this
Thank you so much! This guide was a life-saver - concise, accurate, and effective.
Bro you helped my BF 2042 stream look that much better with my fonts, Legend! Thank You!
solid video, well made and high quality, thank you for this.
Exactly what I was looking for. Thanks for making this video!
This was so useful, absolute legend. Subbed :D
Woohoo! Thank you very much for the sub my guy!!
Exaclty what i was looking for! Thank you so much my man.
This tutorial is huge thanks for the help man!
THANK YOU SO MUCH, THIS IS THE ONLY VIDEO THATS TRULY HELPED ME.
Yay!! Glad it helped
At first I was like... This guy has no energy... Then I was like "F*** Energy. This man is brilliant"
so I'm having an issue where the font is only changing the {Name} but not "has followed!" part of my alert. What did I do incorrectly?
You're amazing, man. Thank you!
you're a lifesaver! thank you for this!
Jesus Christ man, you did the impossible. Thanks a trillion!
Huge thanks for this video! It's exactly what I need, and probably the only video I found that doesn't use SLOBS. Thank you so much!
Underrated video, f****** master
Madre mía david que hacies aqui?
I used transfonter and it unfortunately didnt work for me.. :( only issue I'm recognizing is that when I'm enter the "font-family" portion the text isnt changing color so I'd assume for some reason that might be an issue? any ideas? thanks in advance!
This worked! Thank you for making this guide!
you have the most recent comment, i cannot get this to work at all. and ive watched and done exactly everything he has done.
would this technique also work for the chat box?
Still works as of August 2023, saved my sanity, thank you so much
yoo can you please help me, mine isn’t working 😢
Don't know what to tell you, I followed iberryboi's instructions point by point, and that did it.
Great job keep doing bro became a rising star 🌟
When i do this for a sub/follow message, the custom text only works for the users name that followed or subbed, not the after part. {name} is now following or {name} just subscribed; the "is now following" or "just subscribed" part is still in the old font. I tried looking in at HTML and CSS for both tabs and have been trying to get the rest of the text to also be displayed in the font. Not sure where the option is to make the rest of the message in the font i want and not just the {username}
Are you sure the "is now following" part is not part of the video file and is in the actual HTML?
Hit me on discord iberryboi#1241
@@iberryboi I'm having this issue too!
{name} and {amount} are the correct font but the middle text ('cheered x') will be normal text not with the special font im not sure how to fix it
@@Anna-ul1fj show me on discord
hey. did you solve the problem? same here
This is great! Helpful and concise
Thank you so much for this video! This really help me a lot!
legend, thankyou for this. Liked and subbed
Absolute legend! Thank you!
You get a like. You get a subscribe. Thanks dude, helped a ton!
Thanks!!
Great video! Helped me out a lot. Many thanks!
for some reason the name of the follower is using the font but the "followed" phrase isn't
having the problem another commenter noted, where the white text after {name} ends up being the default font still, so my custom font IS successfully applying to the first word, but the "is now following!" etc is not. any ideas on how to fix this without just removing the following text?
#alert-message{
font-family: 'your-font-name' !important;
}
{name} is now following!
Please could you possibly make one of these for using custom fonts in stream elements?
For sure
@@iberryboi That would be amazing! I'm having an absolute nightmare trying to get a custom font into there!
@@MintOrange this is for stream elements alerts, correct? I'll ping you here when the video is up
Hi i have followed each step and it's not working :( i've been at this for an hour now, could you please help?
I'm having the problem where the alert doesn't show the followers name its worked fine for the others but the follower alert isn't having it
I did his and it changes only the name and the amount in the font, not the text I put
Just gave you like number 420. Enjoy!
amazin bro what about making the text fade in fade out change colour etc
thanks again
Thank you for this, it helped a lot!
Thank you so much! You could have saved me hours of faulty tries!
Thanks bro, this helped a lot
Hey dude, I looked through the comments but couldn't get an answer. It only changes the name of the actual name not the entire message for example "Kami has followed you" ?
I tried the #alert-message { font-family: 'font-name' !important; } but this isnt working. Any thoughts?
Hi! Thank you so much for this video. It works perfectly. 👌 As you said, there's a lack of information about how to include our own fonts in Streamlabs Alert Boxes. On the other hand, I tried to apply your method on the Streamlabs *Follower Goal widget and it doesn't work.* Yet, I thought it was possible to include my own font since a specific field is available but when I include the code line, the bar has a bug in my OBS. Do you know how to fix that?
An absolute legend! Thxxx
Cool stuff, dude.
Thank you a lot!
don’t think so tried ttf and otf or hobeltet called. it’s just said there is no file uploaded. Weird, but I fixed it with using another website to get the files needed
The code i'm getting from fontsquirrel is giving me times new roman. In fact, the demo page in the kit pulls up times new roman. i'm using the same font file that DEFINITELY installed the correct font to my computer.
I think font squirrel is having issues someone else recently said it wasn't working and they had to use a different generator
@@iberryboi i've done a ton more digging, and it seems it's the specific font i'm using. I even found an alternate version, which also, entirely coincidentally, didn't work.
But all the other ones I've tried DID work.
OMFG YO YOU ARE THE BEST
absolute life saver
ok this rocks. thx bro
Good video btw!
Thanks SO MUCh bro this helped
i know this is old but watched this and did everything and it does not work anymore
you Sir are awesome ..i only have one problem for some reason i cant get rid of a blue glow around the text can you help ...if it were white that would be great or none at all
Ty! Click the CSS tab and scroll through until you find box-shadow and change the color value to white
Ty I already figured it out some how...I think I put in no outline !important somewhere and it went away ...lol
@@monster_eh3938 oh yup, gj!
hi! for some reason its only changing my username and not all the text
Don't know if I missed a step but I did what you did exactly and it didn't change anything. Is it because I'm using OBS and not SLOBS?
Yes correct because the changes you made on the website are linked to SLOBs software not regular OBS.
This works! Thank you!
It worked for me! The only problem is that I can't change the font settings ( like i cant change the size, text color etc. ) tysm tho ! :D
what about using this for stream labels? i cant find a way to edit streamlabels code
actually if you're using SLOBS then with streamlabels any fonts downloaded onto your pc will transfer into the software but thats only for labels not alerts.
legend
True hero !
Thanks a bunch! Put Andy STD BOLD as the font for next I play Terraria, as a backup until I can figure out how to get it working -the- with the blocks animations preset for streamlabs chatbox, but idk if you can put any customization into that, perhaps another year will go by and I'll get to it :P
Np! That should be mostly the same except you'll be putting the font family style on the chat box container
Followed this exactly and it didn't work the new font is not showing. Any ideas.
Did you add !important? Is the font name correct? Did you check the embed css button on the generator settings? Send me screenshots on discord or email.
@@iberryboi ok ill post in your discord
@@Richbroth hey I responded on discord, I'm pretty sure I found the error, it was the pesky semicolon after the font name
This is awesome thanks man, but my font change is only applying to the Followers name, not the "has followed" part - any help with that? Cheers
In your CSS apply the font family to the alert-text div like so:
#alert-message { font-family: 'font-name' !important; }
@@iberryboi Awesome. thank you very much!
where is the place where i paste the code, i am having troubles doing this
In your alerts settings under follow, subscriber ect you'll see a button that says enable HTML and CSS
Where do I put the css?
Click alert box on side menu on streamlabs.com and enable html/css under follower, subscriber, donation tab
You can also add it within the slobs software in the alert box properties
@@iberryboi ???
@@KaidenArt yes what's up
@@iberryboi Where is that??
can u help it only changes the name
Sorry to be that guy, but I'm having some trouble. Tried this for my new Follows and for Bit donation, and now no notification shows up when I preview it. Is there something I'm missing?
I'm hearing that font squirrel is having issues right now so need to use a different generator for it to work
@@iberryboi Ohh that explains that. I'll look into some other ones then, thanks for clearing that up.
Edit: Sure enough, that was the issue. Tried Transfonter and that worked right away. Thanks again for the guide
@@zombieplasticclock i guess we broke font squirrel sending too much traffic there 🤣 oh good! Glad that worked I'll have to pin comment to let others know
thanks for the video!! I could only get it to work on the credits roll and not the alert box. the second “url” (on the 4th line) is highlighted red. any help would be appreciated :)
Yes that should be an easy fix! What file type is your font file? Is the code written exactly as copied? Are you missing any semicolons or para theses somewhere? Maybe you could send me a screenshot on discord or something
i berryboi i’m assuming you mean the original file right? it’s a ttf. and yeah i can send you a screenshot, i’m pretty sure i copied it exactly
@@FootBananas yes correct, ok that file type is supported so that's not the problem. Send to my email- rowbs.js@gmail.com
@@FootBananas just got your email, let's talk on there
I'm having the same issue. Were you able to find a solution?
Is font squirrel safe? It's making me very anxious and I don't have any spare pcs to try it on o_0.
Yes it's safe. You can also use transfonter.org
@@iberryboi Okay guess I'll have to take ur word for it. I have a lot that's not backed up. Thank you :).
Thank you man, really.
this helped me thank you
Goat
Hey man, thanks for the video, it helped me a lot. Do you know if there's any way to have custom font in the twitch overlay chat?
Np! Yes you can edit the CSS for the chatbox aswell. I'll try and make a vid about that soon.
@@iberryboi Thanks! I already figured it out, I pasted the same code in the obs custom css section :D. Either way, I think some people will find helpful a tutorial about that!
@@Tomisit0 Nice, I suspected you would figure it out, ty good to know.
Awesome video bro! Had a question. If I wanna use a font from “Dafont” which file do I use once I download the font on to my pc? Please help! 🤙🏽🤙🏽
Ty! Preferably TTF or OTF file format s. I haven't used dafont, what file types do they have for download?
this worked for the first time. streamlabs timed out. logged back in. now it is not working. any advice?
Hmm..Reset cache&cookies. Reset all code and paste it back in, save.
@@iberryboi thank you sir. Love to see a video on animated letters that pull in the new follower from streamlabs. Like a cool animated After Effects text animation
This guy is the don
Thank you so much!
I did what you said to do and it didnt work for me
actually I lied im a dumb ass put a period somewhere on accident KEK thanks for the help!!
@@iEatGophers yea it's always something small like that when coding haha, np thnx for watching!
maestroooo
How do you do this for stream labels?
Streamlabs doesn't allow you to edit the CSS for stream labels. If you want custom font you would have to use stream elements and add it as a browser source in streamlabs.
How can we create a Text Size slider?
Create a custom field with the type of slider. In the CSS apply the custom field as the value of the font-size
@@iberryboi thank you!
@@iberryboi one more question.. sorry... how do I make it work on the CSS? I was able to make the slider... just don't know how to connect it to work
@@snakerooni font-size: {sliderName}; put the custom field name between brackets. I show an example at the end of this video: ua-cam.com/video/HtP9z_ZBFfE/v-deo.html
@@iberryboi you're a true hero! thank you.
thank you so much bro
ILY! Thanks a lot!
Thank you so much Legend!!!!!!!
Do yo know how can I set a custom font size for the {amount} and a custom font size for the {gifter}?
Thanks again you saved me a lot of hours!
H berry, would you be able to explain how to do this with a follow/sub goal bar as well? feel like it would capture the asthetic of my stream even more! it would be very appreciated!
Yes, absolutely good idea that will be the next video
If you want to try it now, see if this works, use the same steps but apply the font-family to the :root in the goal bar CSS editor.
:root{
font-family: 'name' !important;
}
Tried this, unfortunatley it's not changing the font, in fact, it changes the entire goal bar completly to a black box with white text, not sure if it has to do with the other bar being HTML based or not? that's my guess.
@@MccDann interesting, I'm looking into it. Are you using the default donation/follower goal bar?
i berryboi yes the one the streamlabs website supplies
THANK YOU! THUMBS UP!
this doesnt work, it says i have no fonts uplaoded wtf is this
Where does it say that?
@@iberryboi on font squirrel, i used another side for this now.
@@thevirtualgoalie oh I see, wrong file type or something?
incredible, you're so underrated!! How do I change the size of the font after applying that script though? Using the slider won't work. thanks again! EDIT: it's ok the slider works but only on the streamlabs website where the code was uploaded (i.e. not in the actual streaming app itself).
Ty!!! Yes correct :)
it doesn't work and i followed every step verbatim...
Send me a link to your theme
same to me. :( i was so motivated
You look like my science teacher if he was a teenager. Lmao. Good video though.
ty dude!
Thanks man
Its not working for me :/
Fire up the console and see if there's any errors