Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
Builder content link
e.g. Builder.io: Visual Development Platform
Builder public api key
go to Builder.io: Visual Development Platform and copy your PUBLIC api key
What are you trying to accomplish
e.g. I want to integrate builder on a landing page
A font was chosen from the font picker and that font shows up in the editor in Builder.io. However, the published version of the site is NOT showing that chosen font. So it seems like the font is not being included when our Angular app pulls down the builder page. This is not a custom font, this is a font chosen in the font picker.
Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing
Code stack you are integrating Builder with
e.g. NextJS, react, Shopify
Angular
Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!
Hello @jakehockey10,
Could you kindly provide the live page URL or the Builder content link where we can test and investigate the reported issue? This information will help us better understand the context and efficiently address the issue you’re experiencing.
Here is the content url: Builder.io: Visual Development Platform
We are attempting to use Inknut Antiqua font, which is selected and visible on that content link. But the live site is not showing that font, despite the css showing the font-family set: https://kaizendataventures.com/
Hello @jakehockey10,
We’ve checked the font in the Builder editor and on the live page, and it appears to be consistent. Could you please confirm the browser you’re using? Additionally, consider clearing your browser cache to ensure you’re viewing the latest version of the page.
It just recently started working when I added a link tag to my angular app’s index.html header pointing to the font from Google Fonts. But I’m not sure why that would be necessary if I am able to choose that font in the builder.io content page in the editor.
Hello @jakehockey10,
We conducted local testing using our Angular SDK and encountered no issues with the Inkut font in the editor or on the live page. It appears that we didn’t need to manually include the Google font.
Could the font discrepancy be related to global CSS styles in your codebase? It might be worth checking your global styles to ensure they do not conflict with the font settings.
The app itself is using Angular Material, which does set typography to Roboto. But when I view the Chrome DevTools and inspect the elements that should have the Inknut Antiqua font do indeed have their css set correctly. The font-family is set to Inknut Antiqua, sans-serif and is not crossed out or overridden according to the dev tools. And this is happening on several of our machines, not just mine
Hello @jakehockey10,
Do you have any live content or pages where we can test this?
Not at the moment. I can test this again (in the next few days) by removing the link tag in the angular app’s index.html header and report back whether the font is still working or not
