Custom Font using the Advanced Webchat Styler
# đź“–tutorials
c
In case you want to change your bot's font-family,-size,-weight you can use the following code in your advanced styler .css : 1. Grab a Google fonts Embed code and palce it at the top of your Adanced Styler .CSS :
Copy code
css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap');
You will need to paste the following .css code in all of your chat containers :
Copy code
css
  font-family: 'Poppins', sans-serif;  /* Confirming Poppins is applied */
  font-weight: 500;                    /* Normal weight */
  font-size: 24px;                     /* Larger font size for visibility */
Example for the Chat Header:
Copy code
css
/* Styling for the chat header container */
.bpw-header-container {
  margin: 10px;
  background: #ebfa42;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px;
  border-radius: 05px;
  font-family: 'Poppins', sans-serif;  /* Confirming Poppins is applied */
  font-weight: 500;                    /* Normal weight */
  font-size: 24px;                     /* Larger font size for visibility */
  color: red;                         
}
`
To get different types of fonts I recommend
Copy code
fonts.google.com
-> get the @import "embed code" like the following :
Copy code
css
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')
</style>
After this you would just export your stylesheet and it will work ! Let me know if there are any questions and have fun exploring custom fonts, R 🚀 https://cdn.discordapp.com/attachments/1229013261773570099/1229013261987610644/brave_HGlFHohlvG.png?ex=662e22cb&is=661badcb&hm=cacf6d778bc44c3089d85df77b052e9fc690f03a0a10875c083a782f9cbfeaf5& https://cdn.discordapp.com/attachments/1229013261773570099/1229013262272561233/brave_SjmXtKa8YE.png?ex=662e22cb&is=661badcb&hm=adebc7ce6b5ed54dd4aa1d11cbe8127e9c9c1d5d79d2ee8907d8a96ce2be123c&
3 Views