Référence dynamique à une police google de l'application de réaction

Question

Il existe des moyens d'inclure des polices google au projet (soit via l'importation css ou un lien dans la tête html ou avec l'aide du paquet webfontloader), mais ce que je voudrais faire est pour l'avoir à la demande, en fonction des paramètres de page spécifiques.

Par exemple, le site Web est une plateforme de blog. Un utilisateur peut spécifier un lien vers une police google pour sa page. Quand quelqu'un est sur leur page, cette police est utilisée. Et quand ils vont à la page d'un autre utilisateur, une autre police est chargée (que l'autre utilisateur a spécifié).

Existe-t-il un moyen de le faire?

EDIT: ok, je ne pensais pas que la tête puisse être modifiable puisque dans ma configuration c'était statique. Jusqu'à présent, j'ai trouvé deux options possibles:

1. Utilisez react-webfont-loader pour charger les polices
2. Utilisez react-helmet pour indiquer tout dans la tête (également le titre de la page, par exemple).

Answer 1

Oui, il existe un moyen de le faire. Vous devrez prendre deux entrées de l'utilisateur

• Lien vers Google Font

• et le spécificateur d'accès pour cette police

Après ces deux détails, vous pouvez prendre le 2ème comme variable à transmettre à votre police font-family de cette manière:

style={{fontFamily: this.state.acessSpecifier}} 

Answer 2

Utilisez la bibliothèque Web Font Loader. Il a été développé par Google et Typekit, et il est principalement conçu pour vous donner plus de contrôle sur le chargement des polices que ce que l'API Google Fonts fournit. Un bon bonus supplémentaire est qu'il vous permet également de l'utiliser avec quelques autres fournisseurs de polices web hors de la boîte-Typekit et Google Fonts inclus, bien sûr

En un mot c'est un peu autour d'une enveloppe autour de @font-face, donc ferait probablement ce que vous cherchez, et fournirait de jolis contrôles autour de l'affichage pendant le chargement de la police.

La mise en œuvre de référence rapide serait:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> 
<script> WebFont.load({ google: { families: ['Droid Sans', 'Droid Serif'] } }); </script> 

Au lieu d'avoir la logique inline, vous souhaitez personnaliser et étendre l'utilisation de WebFont.load pour répondre aux besoins de votre logique métier, et qui pourrait être livré avec votre code.

Voici un lien au projet: https://github.com/typekit/webfontloader

Hope this helps!