Catégorie : Wordpress

Méthode 1: En utilisant un CDN

Rien de mieux qu’un exemple/explication

Dans votre thème, retrouver le fichier functions.php

Tout en bas du fichier, nous allons copier cette nouvelle fonction: en oubliant pas le commentaire:

---

/**
 * Enqueue google-font
 */
function leslugdemontheme_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'leslugdemontheme_add_google_fonts' );

---

https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300

étant le code de font que vous retrouvez sur : https://fonts.google.com/ et qu’il faut bien entendu adapter.

Exemple avec plusieurs fontes:

Les fontes: Fjalla One and Noto Sans:

https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap
https://fonts.googleapis.com/css2&family=Noto+Sans:wght@400;700&display=swap

ATTENTION
Avec certaines fonts, il faut dupliquer l’appel:

---

/**
 * Enqueue google-font
 */
function leslugdemontheme_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts-fjalla', 'https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap', false );

wp_enqueue_style( 'wpb-google-fonts-notosans', 'https://fonts.googleapis.com/css2&family=Noto+Sans:wght@400;700&display=swap', false );
}
 
add_action( 'wp_enqueue_scripts', 'leslugdemontheme_add_google_fonts' );

---

Il ne me reste plus qu’à utiliser le code suivant dans ma css:

font-family: ‘Fjalla One’, sans-serif;
font-family: ‘Noto Sans’, sans-serif;

Méthode 2: Self hosted font

Référence:
https://www.aleksandrhovhannisyan.com/blog/downloading-and-optimizing-google-fonts/?utm_source=pocket_saves

1. Télécharger le fichier woff2 de la fonte choisie

Récupérer le lien de la fonte:

https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500&display=swap

https://fonts.gstatic.com/s/outfit/v11/QGYvz_MVcBeNP4NJuktqUYLkn8BJ.woff2
https://fonts.gstatic.com/s/outfit/v11/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2

Copier le lien de chaque fonte dans votre navigateur et télécharger le(s) fichier(s) de fonte

2. Uploader le fichier woff2 de la fonte choisie

Dans un dossier « webfonts », dans votre thème

3. Définir le @fontface au sommet de votre css

/* latin */
@font-face {
  font-family: 'Outfit';
  src: url(webfonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
 
}

/* latin */
@font-face {
  font-family: 'Outfit-bold';
  src: url(webfonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
}

4. Appliquer la fonte en css dans votre css

body {
  font-family: 'Outfit';
  font-style: normal;
}

Dans votre thème, retrouver le fichier functions.php

Editer-le, repérer la fonction: 

/**
* Enqueue scripts and styles.
*/
function test_scripts() {
wp_enqueue_style( 'test-style', get_stylesheet_uri() );

wp_enqueue_script( 'test-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

wp_enqueue_script( 'test-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

if ( is_singular() comments_open() ; get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'test_scripts' );

 

wp_enqueue_style( 'ma-custom-feuilledestyles', get_template_directory_uri() . '/style-custom.css' );

 

Ajouter cette ligne de code APRES le chargement de la feuille de style du thème

 
/** 
* Enqueue scripts and styles. 
*/ 
function test_scripts() { wp_enqueue_style( 'test-style', get_stylesheet_uri() ); 

wp_enqueue_style( 'ma-custom-feuilledestyles', get_template_directory_uri() . '/style-custom.css' );

wp_enqueue_script( 'test-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true ); 
wp_enqueue_script( 'test-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true ); 
if ( is_singular(); comments_open() get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } 
add_action( 'wp_enqueue_scripts', 'test_scripts' ); 
 

Uploader le fichier functions.php

Référence: wp_enqueue_style

Installer le plugin « Remote SSH »

Ouvrez votre logiciel Visual Studio Code.

Dans le menu extensions
Installez l’extension « Remote SSH » de Miscrosoft

Paramérez votre server SSH

Cliquez dans le nouveau bouton en bas à gauche votre application

Connectez-vous dans la fenêtre courante

Ajoutez un nouvel hôte/server

La commande est « ssh votrelogin@votreserver.ch« .
Ces informations? Vous les trouvez dans votre interface Infomaniak.

Vous enregistrez cet accès server pour ne pas devoir le configurer à chque fois.
Vous l’enregistrez votre dossier spécifique.a

Connectez-vous à votre server SSH

Votre server étant enregistré: il apparaît dans la liste:

Il vous est demandé le password

Le server apparaît en bas à gauche: vous êtes connectés.

Sélectionner un fichier à modifier

Il vous redemandera votre mot de passe une 2ème fois à l’ouverture du dossier.

Se connecter sur le server à l’aide d’un client FTP

Uploader le dossier du thème non-zippé sur le server distant dans le dossier:

web/votreprojet/wp-content/themes/

Se connecter sur le dashboard du site:
RAPPEL:
[Nom de domaine]/votreprojet/wp-admin
OU si c’est votre site principal:
[Nom de domaine]/wp-admin

Dans la rubrique « Apparence », sélectionner le thème.

Afin de ne pas partir de zéro: télécharger le starter thems  » _s  » :

underscores.me

Remplissez le champ: Theme Name avec le nom de votre projet (p. ex: portfoliovza) et « Generate »:

Remplissez les champs « Advanced Option »

Theme Name: Le nom du thème
Attention: le « Theme Slug »: C’est le nom du thème sans accent ni caractère spéciaux
Author: Votre nom
Author URI: Votre site
Description: La description de votre thème 

Copier le fichier .zip sur votre machine: