Comment installer une police personnalisée sur un site HTML

153

Je n'utilise ni flash ni php - et on m'a demandé d'ajouter une police personnalisée à une simple mise en page HTML. "KG June Bug"

Je l'ai téléchargé localement - y a-t-il une astuce CSS simple pour y parvenir?

html css fonts webfonts Adam
la source

276

Oui, vous pouvez utiliser la fonctionnalité CSS nommée @ font-face. Il n'a été officiellement approuvé que dans CSS3, mais a été proposé et implémenté dans CSS2 et a été pris en charge dans IE pendant assez longtemps.

Vous le déclarez dans le CSS comme ceci:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

Ensuite, vous pouvez simplement le référencer comme les autres polices standard:

 h3 { font-family: Delicious, sans-serif; }

Donc, dans ce cas,

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

Et il vous suffit de mettre le JUNEBUG.TFF au même emplacement que le fichier html.

J'ai téléchargé la police sur le site Web dafont.com :

http://www.dafont.com/junebug.font

Nicolas Modrzyk
la source

1

désolé si c'est "devoirs" à quoi ressemblerait le code si j'utilisais cette police JUNEBUG uniquement pour le texte brut

adam

Je ne savais pas que tu pouvais faire ça. Cela fonctionne-t-il également dans d'autres navigateurs?

Julien Bourdon

1

Fonctionne dans n'importe quel navigateur décent: webfonts.info/wiki/index.php?title=@font-face_browser_support

Nicolas Modrzyk

Cela ne fonctionne pas pour moi, ma police est dans le même dossier que ma page php.

Noir

1

Le chemin @Black spécifié dans urlest relatif à l'emplacement de votre fichier css .

Alex Semeniuk

17

Pour une prise en charge optimale du navigateur, votre code CSS doit ressembler à ceci:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Pour plus d'informations, consultez l'article Utilisation de @ font-face sur CSS-tricks.com .

John Slegers
la source

17

Vous pouvez utiliser @ font-face dans la plupart des navigateurs modernes.

Voici quelques articles sur son fonctionnement:

Voici une bonne syntaxe pour ajouter la police à votre application:

http://www.fontspring.com/blog/fother-hardening-of-the-bulletproof-syntax

Voici quelques endroits pour convertir les polices à utiliser avec @ font-face:

Cufon fonctionnera également si vous ne voulez pas utiliser font-face, et il a une bonne documentation sur le site Web:

http://cufon.shoqolate.com/generate/

nheinrich
la source

9

Essaye ça

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}

 <div class="FontMarket">KhonKaen Market</div>

Développer l'extrait

vilis.org

SIAMWEBSITE
la source

4

Si vous utilisez une feuille de style externe, le code pourrait ressembler à ceci:

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

Et devrait être enregistré dans un fichier .css séparé (par exemple styles.css). Si votre fichier .css se trouve dans un emplacement distinct du code de page, le fichier de police réel doit avoir le même chemin que le fichier .css, PAS le fichier de page Web .html ou .php. Ensuite, la page Web a besoin de quelque chose comme:

<link rel="stylesheet" href="css/styles.css">

dans la section <head> de votre page html. Dans cet exemple, le fichier de police doit se trouver dans le dossier css avec la feuille de style. Après cela, ajoutez simplement le class = "junebug" à l'intérieur de n'importe quelle balise de votre html pour utiliser la police Junebug dans cet élément.

Si vous mettez le css dans la page Web réelle, ajoutez la balise style dans la tête du html comme:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

Et le style d'élément réel peut être inclus dans ce qui précède <style>et appelé par élément par classe ou id, ou vous pouvez simplement déclarer le style en ligne avec l'élément. Par élément, je veux dire <div>, <p>, <h1> ou tout autre élément dans le html qui doit utiliser la police Junebug. Avec ces deux options, le fichier de police (Junebug.ttf) doit être situé dans le même chemin que la page html. Parmi ces deux options, la meilleure pratique ressemblerait à ceci:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

et

<h1 class="junebug">This is Junebug</h1>

Et le moyen le moins acceptable serait:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

et

<h1 style="font-family: Junebug;">This is Junebug</h1>

La raison pour laquelle il n'est pas bon d'utiliser des styles en ligne est que les meilleures pratiques dictent que les styles doivent être conservés au même endroit afin que l'édition soit pratique. C'est également la raison principale pour laquelle je recommande d'utiliser la toute première option consistant à utiliser des feuilles de style externes. J'espère que ça aide.

Richard Stitz
la source

-1

il existe un moyen simple de le faire: dans le fichier html, ajoutez:

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

Remarque: vous mettez le nom du fichier .ttf que vous avez. puis allez dans votre fichier css et ajoutez:

h1 {
    color: blue;
    font-family: vermin vibes;
}

Remarque: vous mettez le nom de la famille de polices de la police que vous avez.

Remarque: n'écrivez pas le nom de la famille de polices comme votre nom de police.ttf Exemple de nom: si votre nom font.ttf est: "vermin_vibes.ttf", votre famille de polices sera: "vermin vibes" la famille de polices ne contient pas de caractères spéciaux comme "-, _" ... etc, il ne peut contenir que des espaces.

Abbass Sharara
la source

Vous devriez vraiment le définir comme un font-faceCSS au lieu d'exiger un fichier ttf.

Arcath

il n'est pas nécessaire de le faire, vous pouvez simplement le faire comme ça.Je le fais toujours des deux manières et les deux fonctionnent

Abbass Sharara

@Arcath pourquoi est-il préférable d'utiliser font-face?

Antonio Araujo

Comment installer une police personnalisée sur un site HTML

Réponses: