{"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   Quelques variables qui peuvent vous aider pour votre mise en page \u2013  Prestashop 1.7 ...  
views 15449<\/div><\/a>\n\t\t\t\t\t\t\t\tDans le tuto du jour, je vais \u00e9num\u00e9rer quelques variables de PrestaShop 1.6 PrestaShop 1.7 qui peuvent vous aider pour personnaliser votre site.\r\n\r\nN'h\u00e9sitez pas \u00e0 les partager via les commentaires\r\n------------------\r\nIns\u00e9rez un lien vers une page CMS dans un fichier TPL\r\nPrestashop 1.6 : {$link->getCmsLink()}\r\n\r\nExemple : l'id de la page cms est 3\r\n\r\n\r\nPrestashop 1.7 :\u00a0{url entity='cms' id=$i...<\/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   Raccourcis claviers Suite Adobe  
views 380<\/div><\/a>\n\t\t\t\t\t\t\t\tLes raccourcis claviers \u00a0sont un\u00a0gain de temps incroyable.\u00a0Ils rendent le travail plus facil, plus rapide et plus simple.\r\n\r\nCependant, il peut-\u00eatre difficile de m\u00e9moriser tous les raccourcis\u00a0 de tous les logiciels.\r\n\r\nC'est pour cela que je trouve cette infographie tr\u00e8s pratique .\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   Supprimer le nom de la boutique de la balise Meta Title| Astuce Prestashop 1.6  
views 2842<\/div><\/a>\n\t\t\t\t\t\t\t\tGr\u00e2ce \u00e0 ce tuto, vous allez pouvoir supprimer le nom de votre boutique de la balise Meta Title\u00a0de\u00a0vos pages sur votre site e-commerce\r\n\r\nAstuce Prestashop 1.6\r\n\r\n----------------------------------\r\n\r\nDans un premier temps, nous allons overrider\u00a0le fichier Meta.php. En effet ces dans ce fichier que nous allons supprimer le param\u00e8tre\u00a0Configuration::get('PS_SHOP_NAME') qui fait r\u00e9f\u00e9rence au nom de vo...<\/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   Comment bien \u00e9crire un tweet | Infographie  
views 228<\/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   Comment trouver LE bon mot cl\u00e9 pour sa page web | Infographie  
views 1068<\/div><\/a>\n\t\t\t\t\t\t\t\tSi vous souhaitez vous positionner\u00a0dans les\u00a0moteurs de recherche et am\u00e9liorer votre visibilit\u00e9, il est tr\u00e8s important de choisir les bons mots-cl\u00e9s pour chacune de vos pages web.\r\nA) Qu'est ce qu'un mot-cl\u00e9 ?\r\nLe mot-cl\u00e9 d\u00e9signe\u00a0l'expression ou le mot que les internautes \u00a0tapent dans le moteur de recherche afin de lancer une recherche.\r\n\r\nSi vous vendez des bougies par exemple, il est important d'...<\/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}]}}