Custom Font (to be overrided) for "Site" component

[yar-developer]

Hi, we have a web application, we have overrided the default @font-face (located in the "site" section) by using the "site.variable" file.
for having the "@font-face" in our webpages:
1. in some pages we use the entire "sematic.css" and
2. in others we use the "site.css" component
as assets. (based on the page's demand).

Problem:
When using the "site.css" component, it doesn't have the theme folder beside it, so the default font url address inside it will be wrong.
what can we do?

1. is it standard to put a themes folder beside the "site.css" in the components folder?
2. or is there any other better way for fixing the problem, such as writing the semi code below in "semantic\src\site\globals\site.variables" file.

/*******************************
     User Global Variables
*******************************/

if(component === 'site'){

    @font-face {
      font-family: 'Vazir FD';
      src: url('../themes/default/assets/fonts/vazir-fd.eot');
      /* IE9 Compat Modes */
      src: url('themes/default/assets/fonts/vazir-fd.eot?#iefix') format('embedded-opentype'), 
     url('../themes/default/assets/fonts/vazir-fd.woff2') format('woff2'), 
     url('../themes/default/assets/fonts/vazir-fd.woff') format('woff'), 
     url('../themes/default/assets/fonts/vazir-fd.ttf') format('truetype'), 
     url('../themes/default/assets/fonts/vazir-fd.svg#svgFontName') format('svg');
      /* Legacy iOS */
    }

}
else{

    @font-face {
      font-family: 'Vazir FD';
      src: url('themes/default/assets/fonts/vazir-fd.eot');
      /* IE9 Compat Modes */
      src: url('themes/default/assets/fonts/vazir-fd.eot?#iefix') format('embedded-opentype'), 
     url('themes/default/assets/fonts/vazir-fd.woff2') format('woff2'), 
     url('themes/default/assets/fonts/vazir-fd.woff') format('woff'), 
     url('themes/default/assets/fonts/vazir-fd.ttf') format('truetype'), 
     url('themes/default/assets/fonts/vazir-fd.svg#svgFontName') format('svg');
      /* Legacy iOS */
    }

}

thank you

[lubber-de]

Yes, if you use relative folder paths then this might be needed.
However, if your backend structure is known, you could consider using absolute paths instead (starting from the root of your webspace)
Another option could be to move site.css to the same folder level as semantic.css