-1

I'm declaring custom font inside css file, using @import and assigning them to elements:

I do not have access to the head tag of the site, I'm doing it in the body...

this does not work.., My question does custom font must be declared in the head of the page in order to load?

marb
  • 53
  • 1
  • 12
  • `@import` tag in css also works, but you need to place them at the top of your css file. – Vivek Kumar Bansal Sep 10 '14 at 15:35
  • It's recommended to place your css in an external css file and then include it in your head tag of the website. If you don't have access to the head tag, use tags wherever you want to add your custom fonts and it should work. – Ionut Necula Jun 30 '16 at 12:18

2 Answers2

0

Using jvascript 

(function loadCss(url) {
    var link = document.createElement("link"),
        url = "App/components/core-jasmine/jasmine.css";
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
})();
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
0

Do not use @import for css files if possible (except in certain circumstances like using @media for different devices) as it can stop CSS files from loading correctly.

You can declare a link tag to import CSS outside the head tag but it can cause several issues - mainly according to W3C specs you should only declare link tags in the head tag (I.E. it would fail the W3C validator). Loading it in the document body also increases load time as the browser has to restyle the page after load.

But in theory, yes, it can be done.

iamgory
  • 862
  • 1
  • 6
  • 10