{"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 bien \u00e9crire un tweet | Infographie  
views 240<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie vous montre comment am\u00e9liorer vos tweets pour augmenter votre visibilit\u00e9 sur la toile.\r\n\r\n\r\n\r\n<\/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   Portrait Robot d\u2019un acheteur un ligne  
views 332<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie, r\u00e9alis\u00e9e par LK conseil, a cr\u00e9\u00e9 un portrait robot d'un acheteur en ligne\r\nQuelques chiffres\r\n36 millions\u00a0de\u00a0consommateurs fran\u00e7ais ont r\u00e9alis\u00e9\u00a0des achats\u00a0en ligne\u00a0au second trimestre de cette\u00a0ann\u00e9e. Il a augment\u00e9 de 4% par rapport \u00e0 la m\u00eame p\u00e9riode l'an dernier.\r\n\r\nSur ces 36 millions d'acheteurs en ligne, 52% commandent au moins 1 fois par mois.\r\n\r\n76 euros ont \u00e9t\u00e9 d\u00e9pens\u00e9s par...<\/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   L\u2019abandon de panier en 10 le\u00e7ons | Infographie  
views 378<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie, r\u00e9alis\u00e9e par SaleCycle, fait un bilan sur l'abandon de panier apr\u00e8s avoir track\u00e9 et analys\u00e9 plus d\u2019un milliard d\u2019abandon de paniers.\r\nLes chiffres-cl\u00e9s de l\u2019abandon de panier\r\nUne majorit\u00e9 des commer\u00e7ants est touch\u00e9 par l'abandon de panier sur son site e-commerce.\r\nPlus les ann\u00e9es passent, plus il est important. En effet celui a augment\u00e9 de 15 points, atteignant 75% en 2015.\r\nQu...<\/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   Petit Memo sur les r\u00e9seaux sociaux  
views 139<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie r\u00e9capitule les dimensions des images et photos sur\u00a0Facebook, Twitter, LinkedIn, Google+ & YouTube. \u00a0A garder pr\u00e8s de soi.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\u00a0\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   Ajouter les fabricants dans la page produit |  Astuce Prestashop 1.6  
views 2812<\/div><\/a>\n\t\t\t\t\t\t\t\tCe tuto va vous expliquer comment ins\u00e9rer les fabricants dans la page\u00a0produit dans la version Prestashop 1.6\r\n\r\nA) Mettre le nom du fabricant avec le lien sur la page produit\u00a0\r\nAjouter les lignes suivantes dans le fichier product.tpl\u00a0qui se situe dans votre th\u00e8me \u00e0 l'endroit \u00e0 vous d\u00e9sirez que le fabricant apparaisse :\u00a0\r\n\r\nR\u00e9sultat :\u00a0\r\n\r\n\r\n\r\nB) Mettre le logo du fabricant avec le lien sur la page ...<\/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}]}}