harsh-harlequin•5mo ago
Voiceflow's font not working outside
In voiceflow's widget preview there's "Ucity Pro" font clearly visible and working.
But when I deploy my agent to a website, font is different, clearly not the one set in voiceflow.
3 Replies
It sounds like the preview in Voiceflow is displaying “Ucity Pro” because that font is built into the preview environment, but when you deploy your agent externally the font isn’t automatically loaded. To have your deployed widget use “Ucity Pro,” you’ll need to explicitly load and apply that font via custom CSS. Here’s what you can do:
• Create or update a CSS file that imports your “Ucity Pro” font using an @font-face declaration. For example:
@font-face {
font-family: 'Ucity Pro';
src: url('https://yourcdn.com/fonts/ucitypro.woff2') format('woff2'),
url('https://yourcdn.com/fonts/ucitypro.woff') format('woff');
font-weight: normal;
font-style: normal;
}
• Then, apply this font to the desired elements by targeting the appropriate widget selectors (for example, using classes that begin with .vfrc). For instance:
.vfrc-widget {
font-family: 'Ucity Pro', sans-serif;
}
• Finally, in your Voiceflow chat widget load code, include your stylesheet by setting the assistant’s stylesheet property. For example:
window.voiceflow.chat.load({
verify: { projectID: 'YOUR_PROJECT_ID' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
assistant: {
stylesheet: 'https://yourwebsite.com/path-to/your-custom-style.css'
}
});
Making sure the font files are properly hosted and referenced will let your deployed agent display “Ucity Pro” consistently with the preview.
For more details on how to customize your widget’s styling, check out our documentation:
https://docs.voiceflow.com/docs/embed-customize-styling Hope this helps!
https://docs.voiceflow.com/docs/embed-customize-styling Hope this helps!
Tico is correct, I had the same issue. @forgecikk
foreign-sapphire•2mo ago
Hi Steve, I am trying to use custom font with following setup, but still not working. Thank you in advance.
custom.css
@font-face {
font-family: 'VolteRounded';
src: url('https://neon-klepon-ddfe79.netlify.app/fonts/VolteRounded-Regular.otf');
font-weight: normal;
font-style: normal;
}
.vfrc-widget {
font-family: 'VolteRounded', sans-serif !important;
}
index.html
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<title>Test chatbota Voiceflow s vlastním fontem</title>
</head>
<body>
<h2>Test chatbota Voiceflow s vlastním fontem</h2>
<p>Tento text je pouze mimo widget – měl by používat VolteRounded.</p>
<!-- 3) Embed Voiceflow widget s vlastními styly z custom.css -->
<script type="text/javascript">
(function(d, t) {
var v = d.createElement(t),
s = d.getElementsByTagName(t)[0];
v.onload = function() {
window.voiceflow.chat.load({
verify: { projectID: 'myactualprojectID' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
voice: {
url: "https://runtime-api.voiceflow.com"
},
assistant: {
stylesheet: 'https://neon-klepon-ddfe79.netlify.app/custom.css'
}
});
};
v.src = "https://cdn.voiceflow.com/widget-next/bundle.mjs";
v.type = "text/javascript";
s.parentNode.insertBefore(v, s);
})(document, 'script');
</script>
</body>
</html>
https://neon-klepon-ddfe79.netlify.app/custom.css loading fine
Is it something with shadow root? Thank you
