web-dev-qa-db-fra.com

Empaqueter une police avec une extension Google Chrome

Je veux utiliser autre chose que les polices standard avec mon Chrome. J'étais enthousiasmé par la possibilité d'utiliser les polices Web Google, mais il semble que cela pourrait entraîner une pénalité pour le transfert de la police Web sur le réseau chaque fois que votre extension l'utilise, au point d'affecter les performances de mon extension. Ai-je une option pour empaqueter une police avec mon extension qui fonctionnera sur toutes les plateformes prises en charge par Chrome (Windows/Mac/etc.)? Merci d'avance

google-chrome-extensionwebfonts
36
user2852001

Choisissez votre police. Comme exemple, je prendrai "Stint Ultra Expanded" . Il y a un exemple comment l'ajouter à votre page:

<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>

Prenez seulement le href et ouvrez-le dans le navigateur. Vous verrez quelque chose comme ceci:

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: local('Stint Ultra Expanded'), local('StintUltraExpanded-Regular'), url(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}

Prendre le premier paramètre de la valeur url de la propriété src ( http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVajs .woff ).

Téléchargez maintenant ce fichier.

Utiliser le paramètre de local la valeur de la propriété src comme nom de fichier ( Stint Ultra Expanded )

Le moyen le plus simple est de le télécharger en utilisant wget:

wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff

Créez maintenant un fichier CSS et ajoutez du contenu que vous avez déjà vu. Mais vous devez changer la valeur de la propriété src. Supprimez tous les local et ajustez url. Cela devrait être comme ceci:

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Stint Ultra Expanded.woff') format('woff');
}

Ajoutez maintenant votre fichier css à l'extension et utilisez la police:

popup.html 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href='css/fonts.css' rel='stylesheet' type='text/css'>
</head>
<body>

    <span style="font-family: 'Stint Ultra Expanded';">Hello Font</span>

</body>
</html>

Si vous souhaitez utiliser cette police dans content_script, vous devez ajuster url dans votre css:

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: url('chrome-extension://__MSG_@@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff');
}

Vous pouvez ajouter autant de @font-face règles dans votre css comme vous le souhaitez.

Remarque: local la valeur dans la propriété src vous indique quel nom doit être utilisé pour le stocker. C'est une bonne idée d'utiliser ce nom.

Deuxième avis: si vous l'utilisez comme prévu par Google, votre navigateur vérifiera si cette police est déjà disponible localement. Si ce n'est pas le cas, il sera alors téléchargé et stocké. Donc, la prochaine fois, il utilisera une police qui était précédemment stockée.

Depuis Chrome 37 (peut-être plus tôt), vous devez mentionner la police comme ressource accessible sur le Web dans le manifeste de l'extension:

"web_accessible_resources": [
  "font/*.woff2"
]

Sinon, vous verriez une erreur comme:

Denying load of chrome-extension://{ID}/font/My Web Font.woff2. 
Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
52
Walery Strauch

C'est assez ancien mais pour tous ceux qui ont encore des problèmes avec cela, il est possible de charger le fichier de police avec javascript. J'ai eu du mal à faire fonctionner une déclaration de police de caractères dans shadow dom; tous les styles se chargeraient mais chrome ignorerait complètement la déclaration font-face.

let font = new FontFace("yourFontName", "url('path/to/font/file.woff')");
document.fonts.add(font);

Cela fonctionne à merveille pour moi. L'utilisation de font-face est probablement préférable, mais je suis presque sûr que mon cas d'utilisation est un bogue dans Chrome. Voici les spécifications pour cela.

6
qwerty

Demander à l'utilisateur des autorisations pour accéder à Google Web Fonts est beaucoup moins d'effort que de les incorporer (même si cela peut être parfaitement logique pour d'éventuels scénarios hors ligne).

manifest.json

"permissions": [
    "http://fonts.googleapis.com/",
    "https://fonts.googleapis.com/"
],
4
Martin Zeitler