Cómo usar @ font-face en una extensión de Chrome en un script de contenido

Question

Como no puedo usar chrome.extension.getURL() en un archivo CSS, ¿cómo puedo usar @ font-face con un archivo de fuente local?

Answer 1

Aquí es cómo conseguir ruta local en css:

body { 
    background-image:url('chrome-extension://__MSG_@@extension_id__/background.png'); 
} 

más sobre él here.

Answer 2

Solo usa una URL relativa. Es simple, más limpio, y es lo correcto para hacer ™:

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../font/fontawesome-webfont.eot'); 
} 

Sé que esta pregunta es viejo pero es un buen resultado en Google y en la respuesta aceptada es ineficiente.

EDITAR: Parece que otros están obteniendo resultados mixtos para esto. Debo mencionar que probablemente no funcione cuando se usa en Content Scripts. He probado esto en Popup Scripts y funciona bien.

Answer 3

Esta solución finalmente funcionó para mí:

Se inyecta un nodo de estilo en el documento de la escritura de contenido.

Y para Font Awesome, solo necesita el .woff src para Chrome.

Adding @font-face stylesheet rules to chrome extension

Mi código:

var fa = document.createElement('style'); 
    fa.type = 'text/css'; 
    fa.textContent = '@font-face { font-family: FontAwesome; src: url("' 
     + chrome.extension.getURL('lib/fa/fonts/fontawesome-webfont.woff?v=4.0.3') 
     + '"); }'; 
document.head.appendChild(fa); 

En el manifiesto:

"css":[ 
    "lib/fa/css/font-awesome.min.css", 
    ... 
    ] 

"web_accessible_resources":[ 
    "lib/fa/fonts/*", 
    ... 
    ] 

Answer 4

pregunta antiguo, pero esto creo que es la mejor solución:

Firefox extension custom fonts

Se aplica igualmente para las extensiones de Chrome porque en lugar de apuntar a un archivo de fuente, está incluyendo la versión codificada en base64 de la fuente en el CSS.