Wordpress - ajout d'une police personnalisée via font-face

J'ai créé un site frontal que je suis en train de télécharger sur wordpress en utilisant le thème html5blank. Je n'ai jamais téléchargé un fichier de police personnalisé auparavant et je pense que le chemin du fichier est erroné. Les fichiers de polices se trouvent dans un dossier de polices de mon dossier de thème enfant. Voilà comment j'ai mon code -Wordpress - ajout d'une police personnalisée via font-face

style.css

@font-face { 
    font-family: 'Gotham-Light'; 
    src: url('/fonts/Gotham-Light.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 

}

J'ai mis aussi dans mon header.php (pas sûr obligatoire) -

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/fonts/Gotham-Light.otf" />

Comment puis-je montrer le chemin correct si c'est ce que le problème est? Peut-il être relatif ou doit-il être absolu?

Source

2017-10-16 Mike.Whitehead

Vous utilisez un chemin absolu dans votre police-face @ ici:

src: url('/fonts/Gotham-Light.otf') format('opentype');

Le / au départ signifie que la recherche de la police dans le Webroot.

En supposant que votre style.css est dans votre dossier thème enfant et fonts est un sous-dossier de cela, essayez ceci (sans le / au début):

src: url('fonts/Gotham-Light.otf') format('opentype');

Source

2017-10-16 18:06:12 FluffyKitten

fonts n'est pas un sous-dossier de style.css, est-ce que ce doit être? En outre, le dossier de polices n'apparaît pas dans mon tableau de bord> Apparence> Éditeur, devrait-il être? (Il est certainement dans le bon dossier de thèmes.) –

@ Mike.Whitehead non, il n'a pas besoin d'être dans un sous-dossier, mais vous devez inclure le chemin où il est dans votre CSS! Vous avez dit dans votre question que le les polices sont dans le dossier des polices de votre thème enfant ... alors où est votre style si ce n'est pas dans le dossier de votre enfant? – FluffyKitten

Je pensais que vous vouliez dire les polices comme un sous-dossier du dossier CSS - désolé. - merci, maintenant j'ai juste besoin de faire fonctionner mon javascript haha :) –

Cela devrait fonctionner, il suffit de mettre la police dans un dossier nommé fonts dans votre répertoire de thème.

@font-face { 
font-family: 'gothamlight'; 
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Gotham-Light.otf); 
font-weight: normal; 
font-style: normal;

}

Source

2017-10-16 18:00:46 DaFois

Merci beaucoup. Donc, il doit être une url absolue alors? Pour le développement, je dois mettre localhost: 8888? –

Je pense que vous pouvez utiliser ' 'pour cela, mais pas dans le fichier css;) – DaFois

Vous devez connaître l'adresse du fichier de police non la feuille de style.

<link rel="stylesheet" href="<?php echo get_template_directory_uri('/fonts/Gotham-Light.otf') ?>/fonts/Gotham-Light.otf" />

Source

2017-10-16 18:14:48

Wordpress - ajout d'une police personnalisée via font-face

Répondre

Questions connexes