Custom Font using the Advanced Webchat Styler
# 📖tutorialsc
cold-jewelry-54343
04/14/2024, 10:19 AMIn 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'); 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 */ 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;
}
` Copy code
fonts.google.com 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>8 Views