We are using BAWoC (BAW on Cloud) and are customizing the Theme, but we need to include some file WOFF, TTTF using URL (look the image) Where I can include these files? I included these files on project WEB FILE and DESIGN FILE but doesn’t have a URL where I can get and include them on my theme source.
Our Theme file entry looks like this
/* ubuntu-regular - latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: url('ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('ubuntu-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('ubuntu-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
url('ubuntu-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-500 - latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 500;
src: url('ubuntu-v15-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('ubuntu-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('ubuntu-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('ubuntu-v15-latin-500.woff') format('woff'), /* Modern Browsers */
url('ubuntu-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('ubuntu-v15-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-700 - latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: url('ubuntu-v15-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('ubuntu-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('ubuntu-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('ubuntu-v15-latin-700.woff') format('woff'), /* Modern Browsers */
url('ubuntu-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('ubuntu-v15-latin-700.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
Image of Error on Console tab of Chrome
I would like to refer to the files uploaded as managed WEB files, but not quite sure how to do the same.
There are multiple ways to achieve this. I’ll list out 2 of them and you can choose the one that best fits your situation. But, before going into the solution, it is necessary that we understand why this problem is occurring. When we provide an “URL” property to “font-face”, it can be an absolute URL or a relative one (in your case it is relative). Hence, it will try to find the font file (woff, ttf, svg, …) relative to the css file. In BPM when we create the theme file, it is basically a “less” file which gets pre-processed an a CSS file is auto-generated. This autogenerated CSS file is served from within the System UI toolkit’s context. Hence, we need to change the way the font-file is being referenced.
Now coming to the solutions:
