Carregar dinamicamente link css externo, não estou conseguindo.

Eu tenho 2 arquivos CSS externos que contém backgrounds da página.

Em 1 só tem links para imagens .webP e em outro somente .PNG , eu estou usando um script para detectar se o browser aceita .webP e caso afirmativo ele altera o link CSS externo em HEAD para o css externo com .webP, por padrão inicialmente ele aponta para o .png, testei numa página mais simples e deu ok, mas na hora de colocar aonde quero não funcionou, segue o código:

No HEAD:

	<link href="‪arquivos_css/png.css" rel="stylesheet" id="key">

	 

	No JS:

//////////////////////////////////////////////////////////////
// FUNÇÃO QUE CRIA O LINK EXTERNO CSS PARA INSERIR NO HEAD // OK//
//////////////////////////////////////////////////////////////

 function loadCSS(url){
 var link = document.createElement('link');
 link.setAttribute('href', url );
 link.setAttribute('rel', "stylesheet" );
 link.setAttribute('id', "key" );

 var para = document.getElementsByTagName('head')[0]; //Nó pai HEAD
 var velho = document.getElementById('key'); //local exato do elemento a ser substituido

 para.replaceChild(link, velho); //Substituímos o velho pelo novo(link)
 }

//////////////////////////////
Chamada à função do webP
/////////////////////////////

WebpIsSupported(function(isSupported){
 if(isSupported){
 //CHAMA A FUNÇÃO LOADCSS e carrega o link CSS externo com WEBP
 loadCSS('arquivos_css/webp.css');
 }
});

////////////////////////////////////////////////////////////// // FUNÇÃO QUE DETECTA A COMPATIBILIDADE DO BROWSER COM WEBP // //////////////////////////////////////////////////////////////

function WebpIsSupported(callback){
 if(!window.createImageBitmap){
 callback(false);
 return;
 }
 var webpdata = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
 fetch(webpdata).then(function(response){
 return response.blob();
 }).then(function(blob){
 createImageBitmap(blob).then(function(){
 callback(true);
 }, function(){
 callback(false);
 });
 });
}

	O erro que está dando no chrome é esse: Failed to load resource:** *****net::ERR_FILE_NOT_FOUND***

	já mudei na função loadCSS o endreço dos arquivos de loadCSS('arquivos_css/webp.css'); para loadCSS('/arquivos_css/webp.css');

	 

	e não funciona....

	 

	o arquivo CSS externo contém backgrounds dentro do seletor **HTML**

	tipo :

	 

	html {

	      background-image.....(1);

	      background-image.....(2);

	      background-image.....(3);

	     etc 

	}

	eu vou no **elements **do chome e está lá no HEAD conforme quero mas não carrega na página e dá este erro no console. –

	o que pode estar acontecendo ? ?