estoy tratando de agregar una fuente a mi proyecto, el tema es que necesito hacerlo todo desde JS, ¿Como cargo una fuente desde un archivo .ttf? ya que para aplicar la font-family necesito que la fuente este ya cargada (puesto que por lo visto solo recibe como parámetro el nombre de la fuente, no así su dirección absoluta).
1 respuesta
Nota: En todos los
snippets
se carga una fuenteWeb Open Font Format 2
(.woff2
), porque no pude encontrar unaTrue Type
(.ttf
). De todas formas las soluciones aplican de igual forma para fuentesTrue Type
.
Se me ocurren 3 formas de cargar dinámicamente una fuente usando javascript
:
- Creando un tag
link
e indicando elhref
al archivo donde esta declarada la fuente.
function loadFont() {
var link = document.createElement('link');
link.href = '//fonts.googleapis.com/css?family=Bungee+Inline';
link.rel = 'stylesheet';
document.head.appendChild(link);
}
//
document.getElementById('cargar').addEventListener('click', loadFont);
h1 {
font-family: 'Bungee Inline', arial;
}
<h1>Hola Mundo!<h1>
<button id="cargar">Cargar fuente</button>
- Creando un tag
style
y utilizar@import
para cargar la fuente.
function loadFont() {
var style = document.createElement('style');
style.innerText = "@import url('https://fonts.googleapis.com/css?family=Bungee+Inline');";
document.head.appendChild(style);
}
//
document.getElementById('cargar').addEventListener('click', loadFont);
h1 {
font-family: 'Bungee Inline', arial;
}
<h1>Hola Mundo!<h1>
<button id="cargar">Cargar fuente</button>
- Creando un tag
style
y declarando la 'font-face'.
function loadFont() {
var style = document.createElement('style');
style.innerText = "@font-face {\
font-family: 'Bungee Inline';\
src: local('Bungee Inline'), local('BungeeInline-Regular'), url(https://fonts.gstatic.com/s/bungeeinline/v2/Tb-1914q4rFpjT-F66PLCTxObtw73-qQgbr7Be51v5c.woff2) format('woff2');\
}";
document.head.appendChild(style);
}
//
document.getElementById('cargar').addEventListener('click', loadFont);
h1 {
font-family: 'Bungee Inline', arial;
}
<h1>Hola Mundo!<h1>
<button id="cargar">Cargar fuente</button>