Hello everyone!
I’m having some issues trying to install custom fonts in my storefront. I followed the VTEX documentation (Customizing your store’s typography) for the store I’m working on, and it seems like the “font-faces.css” file isn’t even being loaded — I even tried using a font hosted elsewhere, but had no success.
Has anyone been through this or have any suggestions on how I can fix this problem?
Have you tried configuring this in a CSS file inside the css folder?
For example: vtex.store-header.css?
or importing that file?
For example:
@import(../configs/font-face.css)
I believe that for files outside the css folder you need to do this
Oops! Thanks for the reply. Even with @import in vtex.store-header.css my fonts still don’t load. I think my problem is something else…
I ran some new tests today and instead of pointing to a font in the theme’s assets folder, I pointed to a URL of a font hosted elsewhere — this time it worked. Because of this, I believe the font-faces.css file is working correctly, and I think I’m doing something wrong with the asset-builder. Besides adding the assets to the builders list in the manifest, do I need to do anything else to make it work correctly? Do the files in that folder work if an app hasn’t been published to a development workspace?
@iHenrique they do work, you don’t need to have Production set to TRUE. The correct structure would be this, and it’s important to import the fonts in /assets.
In the font face css, you could also bring it in via SRC url, e.g.
@font-face {
font-family:“NAME”;
src:url(“https://use.typekit.net… FULL URL”);
font-display:auto;font-style:normal;font-weight:400;
}
Tip: In checkout6-custom.css, take the opportunity to import it there as well to keep the typography consistent within the full project. The checkout does not inherit fonts from assets/
Cheers