{"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   Quatre principes essentiels pour un bon design web | Infographie  
views 172<\/div><\/a>\n\t\t\t\t\t\t\t\tL'agence\u00a0Hero de Pixela cr\u00e9e une infographie r\u00e9pertoriant les quatre principes essentiels\u00a0pour un bon design:\r\n\r\n- la lisibilit\u00e9 du contenu textuel\r\n- la navigation,\r\n- la palette des couleurs,\r\n- les images\r\n\r\n\r\n\r\nAvant de vous lancer dans votre projet projet, n'h\u00e9sitez pas \u00e0 jeter un coup d'oeil \u00e0 cette infographie.\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   Astuce : Centrer votre menu dans Prestashop 1.6  
views 4142<\/div><\/a>\n\t\t\t\t\t\t\t\tVoici un petit tuto qui va vous permettre de centrer votre menu dans prestashop\r\n\r\nCette astuce Prestashop est valable pour la version 1.6\r\n\r\n\r\n\r\nComment centrer le menu sur ma boutique Prestashop ?\u00a0\r\nIl y a q'un seul fichier \u00e0 modifier : superfish-modified.css\u00a0 qui appartient au module blocktopmenu\r\n\r\n\r\n\r\n1) Dans .sf-menu, ajouter text-align:center\r\n\r\n2) Dans .sf-menu > li, remplacer float:lef...<\/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 activer SSL dans PrestaShop 1.6 & 1.7 ?  
views 3996<\/div><\/a>\n\t\t\t\t\t\t\t\tDans ce tuto nous allons voir comment activer le SSL sur votre boutique, c'est tout simple\r\nQu'est- ce que le SSL ?\r\nLorsque vous regardez l'url des sites web, ils commencent en g\u00e9n\u00e9ral\u00a0 par \u00ab http:\/\/ \u00bb\u00a0 ou \u00ab https:\/\/ \u00bb. Ce \u00ab s \u00bb indique que le site sur lequel vous naviguez est chiffr\u00e9 afin que vos donn\u00e9es ne puissent pas \u00eatre intercept\u00e9es.\u00a0 Le site est donc s\u00e9curis\u00e9, cela s'appelle SSL soit Secur...<\/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   Quel est le r\u00e9seau social le plus utilis\u00e9 dans le monde ?  
views 896<\/div><\/a>\n\t\t\t\t\t\t\t\tVincenzo \u2018Vincos\u2019 Cosenza met \u00e0 jour, tous les 6 mois, une carte du monde des r\u00e9seaux sociaux, gr\u00e2ce notamment aux donn\u00e9es d\u2019Alexa.\r\n\r\nCette carte permet de visualiser plus rapidement les r\u00e9seaux sociaux dominants dans chaque pays du monde et leur \u00e9volution.\r\n\r\n\r\n\r\n \r\n\r\nOn peut noter que Facebook d\u00e9tient 93% du march\u00e9 soit 128 pays sur 137 pays analys\u00e9s. Mais, par rapport \u00e0 juillet 2014, il y a un...<\/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   Faire une sauvegarde de votre BDD depuis le BO de Prestashop 1.6  
views 2377<\/div><\/a>\n\t\t\t\t\t\t\t\tQu'est ce qu'une BDD (base de donn\u00e9es) ?\u00a0\r\nUne base de donn\u00e9es est un outil qui permet de collecter et organiser des informations.\r\n\r\nExemple: vos produits, vos images, vos textes, vos commandes, vos clients....\r\n\r\nPourquoi faire une sauvegarde ?\u00a0\r\nEn cas de bug, d'une fausse manipulation, d'un module d\u00e9fectueux.... il sera peut-\u00eatre n\u00e9cessaire de r\u00e9initialiser votre base de donn\u00e9es. D'o\u00f9 l'import...<\/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}]}}