{"id":3637,"date":"2019-08-06T13:17:03","date_gmt":"2019-08-06T13:17:03","guid":{"rendered":"https:\/\/www.majory-cubizolles.fr\/blog\/?p=3637"},"modified":"2019-08-06T13:17:17","modified_gmt":"2019-08-06T13:17:17","slug":"modifier-la-police-decriture-avec-google-fonts-prestashop-1-7","status":"publish","type":"post","link":"https:\/\/www.majory-cubizolles.fr\/blog\/modifier-la-police-decriture-avec-google-fonts-prestashop-1-7\/","title":{"rendered":"Modifier la police d’\u00e9criture avec Google Fonts – PrestaShop 1.7"},"content":{"rendered":"

Dans ce tuto nous allons voir comment modifier la police d’\u00e9criture avec Google Fonts pour votre site PrestaShop 1.7<\/p>\n

A noter: actuellement la police par d\u00e9faut est <\/strong>Noto Sans, sans-serif<\/strong><\/span><\/p>\n

Etape 1) Choisir sa police d’\u00e9criture\u00a0<\/span> <\/strong><\/h2>\n

Nous allons choisir notre\/nos police(s) d’\u00e9criture sur le site de Google Fonts \u00e0 cette adresse : https:\/\/fonts.google.com\/<\/a><\/p>\n

Je vais choisir deux polices d’\u00e9criture, 1 pour les paragraphes et une autre pour les titres<\/p>\n

Dans cette exemple, on va opter pour Open Sans pour les paragraphes et Fjalla One pour les titres<\/p>\n

A) Je recherche ma police d’\u00e9criture, pour les paragraphes je sais d’avance\u00a0 ce que je vais prendre je vais donc la chercher directement via le moteur de recherche puis cliquez sur l’icone +<\/p>\n

<\/p>\n

\"\"<\/a><\/p>\n

B) Pour les titres, je vais faire une recherche via un mot pour voir le rendu. Une fois trouv\u00e9\u00a0 je clique sur l’icone + de la police que je souhaite<\/p>\n

\"\"<\/a><\/p>\n

C)\u00a0 Maintenant que nous avons nos deux polices d’\u00e9criture, nous allons cliqu\u00e9 sur l’onglet en bas qui est apparu lors de mon 1er ajout<\/p>\n

\"\"<\/a><\/p>\n

D)\u00a0 Nous allons avoir besoin des codes des deux blocs \u00ab\u00a0embed font\u00a0\u00bb et \u00ab\u00a0specify\u00a0 in css\u00a0\u00bb.<\/p>\n

\"\"<\/a><\/p>\n

Etape 2) Les int\u00e9grer dans PrestaShop<\/span>
\n<\/strong><\/h2>\n

A) On va int\u00e9grer dans un 1er temps le code qui se situe dans embed font. Pour cela il faut ouvrir le fichier head.tpl qui se situe dans\u00a0 themes\/nomdevotretheme\/templates\/_partials\/head.tpl et coller le code que propose Google font<\/p>\n

\"\"<\/a><\/p>\n

B) On va maintenant ouvrir le fichier custom.css qui se situe dans \/themes\/nomdevotretheme\/assets\/custom.css et ins\u00e9rez le code suivant (cf google fonts)<\/p>\n

body {font-family: 'Open Sans', sans-serif; }\r\n\r\n.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: 'Fjalla One', sans-serif; }<\/pre>\n
 <\/p>\n
ET VOILA LE R\u00c9SULTAT<\/strong><\/p>\n
\"\"<\/a><\/p>\n
 <\/p>\n
Articles similaires<\/h2><\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Comment fixer vos frais de port | E-commerce  
views 2163<\/div><\/a>\n\t\t\t\t\t\t\t\tIl vous est certainement arriv\u00e9 un jour de stopper votre processus d'achat \u00e0 cause des frais de port trop \u00e9lev\u00e9s.\u00a0Vous n'\u00eates pas seul dans cette situation, 44% des internautes abandonnent leur panier \u00e0 cause\u00a0de cet facteur.\r\nQuelles sont les solutions \u00e0\u00a0disposition du e-commer\u00e7ant ?\r\n\r\n \t\r\nOffrir les frais de port\r\n\r\n\r\nC\u2019est certainement la solution la plus co\u00fbteuse, il faut avoir une tr\u00e8s forte ...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Bug Google MAP \u2013 Petit probl\u00e8me\u2026  | Prestashop 1.6  
views 4122<\/div><\/a>\n\t\t\t\t\t\t\t\tVous \u00eates sur Prestashop 1.6 et la carte Google MAP, ne s'affiche pas sur la page \"magasins\"\u00a0?\r\n\r\nVoici un tutoriel qui va permettre de r\u00e9gler ce petit souci.\r\n\r\n\r\n\r\n\r\n\r\nA) Obtenir un cl\u00e9 API sur google\r\n\r\nPour g\u00e9n\u00e9rer une cl\u00e9 API de la part de google, allez sur le site suivant : https:\/\/developers.google.com\/maps\/documentation\/javascript\/?hl=fr et cliquez sur obtenir une cl\u00e9\r\n\r\n\r\n\r\nOPTION\u00a0 1)\u00a0\r\n\r...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Prestashop 1.6 | Slider sur toute la largeur sur votre page d\u2019accueil  
views 9726<\/div><\/a>\n\t\t\t\t\t\t\t\tVoici un tutorial qui va vous permettre d'afficher le slider de votre page d'accueil sur toute la largeur.\r\n\r\nValable pour prestashop 1.6\r\n\r\nA noter :\u00a0la largeur maximum de l'ensemble de votre contenu est 1170px.\u00a0 Si vous d\u00e9sirez afficher une photo correctement sur votre site, je vous conseille une largeur de 1170px. La hauteur est libre.\r\n\r\nUpdate : il se peut que ce tuto ne fonctionne pas. La no...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   D\u00e9sactiver \u00ab\u00a0Suivez le guide : d\u00e9couvrez PrestaShop \u00ab\u00a0  
views 513<\/div><\/a>\n\t\t\t\t\t\t\t\tVous en avait marre de voir la banni\u00e8re \"Suivez le guide : d\u00e9couvrez PrestaShop \", sur vos pages ?\r\n\r\n\r\n\r\nDans ce cas, suivez ce tuto\r\n\r\n\r\nComment d\u00e9sactiver \"Suivez le guide : d\u00e9couvrez PrestaShop \"\r\nDepuis le back-office, allez dans Modules et Services >\u00a0Modules et Services et recherchez le module\u00a0OnBoarding. Installez-le et le tour est jou\u00e9\r\n\r\n\r\n\r\n\u00a0<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   3 produits achet\u00e9s le 2\u00e8me gratuit | Astuce Prestashop  
views 5786<\/div><\/a>\n\t\t\t\t\t\t\t\tVous d\u00e9sirez mettre en place une campagne de promotion : x produits achet\u00e9s, 1 offert.\r\n\r\nIl est tr\u00e8s facile de configurer ce cas de figure dans Prestashop\r\n\r\nComment mettre en place cette promotion dans le back-office de Prestashop \u00a0?\u00a0\r\nA) Connectez-vous au\u00a0back-office de Prestashop\r\n\r\nB) Allez dans l'onglet Promotions > R\u00e8gles Paniers\r\n\r\n\r\n\r\nC) Configurer les informations comme ci-dessous\r\n\r\n...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n<\/div>  ","protected":false},"excerpt":{"rendered":"
Dans ce tuto nous allons voir comment modifier la police d’\u00e9criture avec Google Fonts pour votre site PrestaShop 1.7 A noter: actuellement la police par d\u00e9faut est Noto Sans, sans-serif Etape 1) Choisir sa police d’\u00e9criture\u00a0 Nous allons choisir notre\/nos police(s) d’\u00e9criture sur le site de Google Fonts \u00e0 cette […]<\/p>\n","protected":false},"author":1,"featured_media":3646,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,12],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/3637"}],"collection":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/comments?post=3637"}],"version-history":[{"count":0,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/3637\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media\/3646"}],"wp:attachment":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media?parent=3637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/categories?post=3637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/tags?post=3637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}