6

I am relatively new to DXA. I want to understand how fonts can be deployed to delivery server using DXA.

For instance we have added the fonts folder in \build-files\src\bower_components\font-awesome\fonts containing some fonts.

Added the build-files.zip file to HTML Design Configuration component and published the Publish HTML Design page. Still it is not showing on CDS server.

Also tried adding the fonts folder in html-design.zip but doesn't works.

3

I wouldnt manually add stuff to the bower_components folder, as this is a folder automatically managed by bower (a package manager a bit like NuGet).

You could in theory use bower to manage your fonts (as described here), but this may be a bit of overkill. Try creating a fonts folder in /src/system/assets/ and dropping your font files in there.

To test it works I recommend you manually build the HTML design yourself rather than zipping, uploading and publishing - which will take some time and be annoying if you make a small mistake. There are instructions to do this in the html/whitelabel/build.html page that comes in the download or check here for an online version.

  • Thanks Will. We had already tried creating fonts under /src/system/assets/ but we are unable to access it using browser. We are using tomcat. In short any file (JS, CSS etc) which is manually copied to the BinaryData and subsequent folders is not accessible via browser. i.e. We are not able to consume it. – Huston Lopes May 22 '15 at 12:31
  • I dont mean in BinaryData, I mean in the html-design.zip - manually adding assets to BinaryData will most likely not work, as this is simply a serialized cache of what is in the broker database. – Will Price May 22 '15 at 13:23
  • If you want to manually deploy the HTML design, instead of publishing it, you should check out the docs - check out the Manually building assets section: docs.sdl.com/LiveContent/content/en-US/… – Will Price May 22 '15 at 13:25
  • Tried creating fonts folder in /src/system/assets/ but still fonts folder is not created in Binary data folder. "To test it works I recommend you manually build the HTML design yourself rather than zipping, uploading and publishing" How to build manually? same way as we tried? – Huston Lopes May 25 '15 at 7:59
  • 1
    Please re-read my answer - there is a link there with instructions on how to bulid the HTML design manually. – Will Price May 26 '15 at 8:44
2

You should not want to (or try to, for that matter) change the build-files.zip, it was split of from the html-design.zip for the reason to keep the html-design.zip, simple, manageble and usable.

Your fonts folder and its content will not be automatically copied to the dist folder of the Grunt build. This all depends on the references you make to the fonts in there. Bootstrap references its fonts in its Less files, and those are downloaded via Bower I think. I’m not too much of an expert on Bootstrap, since I’m not a front end developer myself, so I don’t know too much of those details. I would dig through the Less files (certainly those of Bootstrap and Bower) and check if you can find font references there, and see if you can change them to your desired font.

The DXA HTML Design is a bit limited in the sense that we don't allow you to change the package.json, Gruntfile.js and bower.json (these are overwritten by the contents of the build-files.zip at publish time). If you can't make your desired changes without adjusting the contents of the build-files.zip, then I think you are better off ditching the publishing of the HTML design all together, and use your own build process and add the CSS, JavaScript and Fonts you need directly in your web application, and deploy them as part of that.

  • I have altogether stopped touching the build-files.zip file. I have added the fonts folder to \html-design\src\system\assets\fonts. Then I followed the build process. Fonts folder was created in dist at : \html-design\dist\system\assets\fonts. Now only aim is getting this published from tridion... – Huston Lopes May 26 '15 at 12:20
  • 1
    @HustonLopes when that is also created at Publish time, it should be picked up and published by the TBB. Not sure exactly what version you use, but if you open the Publish HTML Design Component Template in the Template Builder, and you have a Cleanup Parameter there, try setting it to "false", and publish again, that will leave all the files of the build after Publish so you can inspect what you have and if it worked. If you don;t have that parameter, then you will need to either debug the TBB or adjust it and add a cleanup option. – Bart Koopman May 26 '15 at 12:35
  • I found that parameter and set it to false. Where can I check the files now? there is still no change in Binary data. :( – Huston Lopes May 26 '15 at 12:56
  • 1
    @HustonLopes there is a temp folder created in the root of the drive where you have Tridion installed (defaults to C:) the temp folder starts with an underscore (_) and then has a timestamp following most likely. When you preview it via the Template Builder, you will see in the log messages what is happeneing and where... – Bart Koopman May 26 '15 at 13:36
2

The problem is resolved finally.

  1. I was checking the BinaryData folder on my development machine. An assets folder is created under BinaryData folder when we hit the website for the first time. The assets folder contains only those resources which are used in your webpages. The fonts referred in our CSS had a wrong path set, so the pages were not getting the fonts required. And hence no fonts folder was created in assets folder.

  2. After setting the path correct, we got some fonts working. Eventually the assets folder got populated with fonts used. I then tried to add more fonts in html-design.zip. Published the html-design page but new fonts were not getting deployed. Checked using template builder (as suggested by Bart) but these fonts were not at all getting deployed to database or even in the template builder temp files. Only the earlier used fonts were working. It was because, I was updating the html-design component from parent publication by directly opening through pages. I did not realise it was localised in 400 publication. A very silly mistake from my side. We unlocalised the component and it started working.

  3. One small care we need to take while zipping back the html-design contents. When I zipped the folder the zip file was having an additonal folder level "html-design" followed by the contents. i.e. html-design.zip\html-design(Contents) instead of html-design(contents).

  4. Also while copying the fonts in assets folder, ensure there are no additional folders under fotns. i.e. All font files should be placed under "\html-design\src\system\assets\fonts". We had placed one additonal folder under fonts for eg "\html-design\src\system\assets\fonts\Arial-Font\Arial-Bold.ttf". But in the dist folder, it was resolved only till "\system\assets\fonts\Arial-Font" . i.e the Grunt build only looks for contents of font folder and not the child folders in font folder. Also the fonts folder should not have any other file like txt.

Many thanks to Bart and Will for the pointers. And special thanks to @Jan for helping in identifying this issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.