comment intégrer sa police de marque à son site Squarespace ?
En natif, Squarespace propose des centaines de typographies (aka, de polices !). Personnellement, j’adore explorer leur base, lorsque je suis en recherche d’inspiration pour les projets sur mesure ! 😍Cependant, si vous avez travaillé avec un graphiste, vous allez vouloir intégrer votre propre police de marque pour vos titres, mais aussi, pourquoi pas, vos paragraphes !
[ L’article qui suit est une transcription arrangée de la vidéo ! ]
choisir sa police de marque gratuite
Si vous avez travaillé avec un graphiste, normalement, votre graphiste vous a fourni votre police de marque, ou vous a guidé pour que vous en fassiez l’acquisition. Mais, si vous n'avez pas encore eu l'occasion de travailler avec un graphiste, et que vous cherchez une police un peu plus originale que celles proposées par Squarespace, vous avez tout à fait la possibilité d'aller chercher une police libre de droits sur différents sites :
Point d’alerte : faites très attention si vous avez pour projet d'utiliser cette police pour votre identité de marque ! Que ce soit pour votre site, mais aussi pour vos réseaux sociaux ou Instagram, à utiliser une police qui soit libre de droits !
Prenons l’exemple de dafont, qui est très bien fait :
En prenant la première police de la liste, on voit qu’il est indiqué “gratuit pour un usage personnel”, c'est-à-dire, vous n'allez pas pouvoir vous en servir dans le cadre de votre entreprise.
A l’inverse, on voit que la suivante, Fogtwo N°5, est 100 % gratuite et/ou dans le domaine public : vous pouvez donc vous en servir dans un cadre professionnel. C’est un point sur lequel il vous faudra être extrêmement attentif !
Ces recommandations s’appliquent également si vous travaillez avec un graphiste ! J’ai déjà eu le cas avec une cliente… faites attention à ce que la police que vous choisissez soit disponible pour le français, avec tous les accents. Il est très facile de se tromper, de choisir sa police américain, et de se rendre compte à la dernière minute de son erreur.
Pour sélectionner, sur dafont par exemple, les polices libres de droits, venez cliquer sur “plus d’options” dans la barre de recherche, puis cocher les options “100% gratuit” et “domaine public”.
Une fois votre police choisie, cliquez sur “télécharger”, puis venez extraire le fichier sur votre ordinateur (clic droit > extraire). Vérifiez que la police est complète : accents, symbole euro…
acheter une police de marque
Vous avez tout à fait la possibilité d'acheter une police. Si vous avez travaillé avec un graphiste pour votre image de marque, c'est certainement ce que vous avez dû faire…
Mais dans le cas où vous recherchez tout simplement une police un peu plus originale, quelque chose qui se voit moins de partout… vous avez d’autres sites sur lesquels vous pouvez trouver et acheter des polices pour votre entreprise :
comment choisir sa licence pour sa police de marque ?
Prenons l’exemple d’une police de marque sur Creative Market.
Lorsqu’on regarde la liste des prix, en termes de licences, on passe facilement du simple au centuple. A chaque licence correspond un usage.
Attention ! Chaque site, chaque plateforme et chaque artiste, a sa propre définition de chaque licence, les définitions qui suivent sous données à titre indicatif : à vous de bien lire les petites lignes et et aller vérifier dans le détail ce qui est inclus ou pas.
Desktop : vous pourrez utiliser la licence pour créer des visuels print ou pour vos réseaux sociaux.
E-pub : vous pourrez utiliser la licence pour de l’édition digitale (comme un e-book).
App : vous pourrez utiliser la licence pour publier la police sur une application mobile.
Webfont : la licence qui nous intéresse ! Vous pourrez intégrer la police dans votre CSS et vous en servir sur votre site Internet. Cette licence peut être unique, ou dépendre de votre trafic. Plus le trafic est important, plus la licence va être élevée. En cas de doute, prenez la licence au-dessus !
Réfléchissez de manière globale et anticipez vos futurs besoins : print, trafic important, publicité… et choisissez la licence qui convient à la fois à votre besoin actuel et besoins futurs !
Les licences peuvent parfois se cumuler, comme on le voit dans l’exemple de cette licence. Pour ce cas particulier, si l’on souhaite obtenir la licence à la fois pour notre site Internet, et pour créer des visuels pour nos réseaux sociaux, nous allons avoir besoin d’acheter la licence Desktop, mais aussi la licence Webfont (10k visiteurs par mois), pour un total de 100 US$.
Une typographie créée par un artiste, ou un graphiste, n’a pas besoin de vous coûter les yeux de la tête. Pour vous donner mon propre exemple, la licence globale pour ma propre police de marque, m’a coûté environ 80 EUR au total.
Conclusion : n’hésitez pas à sortir des sentiers battus, et à investir quelques dizaines d’euros dans cet élément de votre identité de marque !
Et on rappelle bien entendu qu’une police doit toujours être choisie avec stratégie, et non pas au hasard !
intégrer sa police personnalisée à son site Squarespace
On y vient enfin ! Suivez le guide étape par étape. Si vous savez faire un copier-coller… vous saurez intégrer votre propre police de marque !
1. Télécharger la police dans Squarespace
Allez dans Design > CSS personnalisé > Gérer les fichiers personnalisés > Ajouter des images ou des polices de caractères
Sélectionnez votre police au format fichier .otf, et c’est tout pour la première étape !
2. Configurer votre police
Dans votre fenêtre de code CSS, venez copier et coller le code ci-dessous :
@font-face {
font-family: xxx;
src: url(); }
h1 {font-family: xxx;}
h2 {font-family: xxx;}
h3 {font-family: xxx;}
h4 {font-family: xxx;}
h1.entry-title.entry-title--large.p-name {font-family: xxx !important;}Venez changer les xxx par le nom de votre police - qui doit être identique partout !
Puis intégrez l’URL de votre police : cliquez entre les parenthèses, puis sur l’icône de votre police. Votre code final doit ressembler à quelque chose, comme :
@font-face
{ font-family: Kaftan;
src: url(https://static1.squarespace.com/static/5ff727dc3de77913d/t/6140d4f3494a5f0565d106a2/1631638772171/Kaftan+Serif.otf);}
h1 {font-family: Kaftan;}
h2 {font-family: Kaftan;}
h3 {font-family: Kaftan;}
h4 {font-family: Kaftan;}
h1.entry-title.entry-title--large.p-name {font-family: Kaftan !important;}Le code CSS sera appliqué automatiquement !
Vous ne voyez pas votre police s’appliquer ?
Assurez-vous d’avoir utilisé le même nom de police partout !
Vérifiez que l’URL de votre police soit correcte - regardez la vidéo si besoin !
Pour aller plus loin et changer la police du titre du site :
#site-title {
font-family: xxx !important;
}Pour changer la police des paragraphes :
p {
font-family: xxx !important;
}
Webdesigner et consultante Squarespace, j’accompagne et je crée pour mes clients des sites intelligents, stratégiques et haut de gamme. On travaille ensemble ?
Personnalisez en quelques clics et copier-coller votre site Squarespace : intégrer votre police, personnaliser les cookies… sans apprendre à coder !
