Comment faire pour modifier bootstrap.css font-family HTML à ma propre police téléchargée

Question

J'ai essayé de trouver comment faire cela, au moins this link m'a presque obtenu. mais il utilise un lien pour changer la police.

mais j'ai ma propre police téléchargée à l'aide font converter (.eot .otf .svg .ttf .woff .woff2)

et j'ai style.css comme ci-dessous:

/* font converted using font-converter.net. thank you! */ 
@font-face { 
    font-family: "CataneoBT-Regular"; 

    src: url("./fonts/07323Cataneo.svg") format("svg"), /* Legacy iOS */ 
    url("./fonts/07323Cataneo.ttf") format("truetype"), /* Safari, Android, iOS */ 
    url("./fonts/07323Cataneo.woff") format("woff"), /* Modern Browsers */ 
    url("./fonts/07323Cataneo.woff2") format("woff2"); /* Modern Browsers */ 
    font-weight: normal; 
    font-style: normal; 
} 

C'est morceau de code de mon bootstrap.css html:

html { 
    font-family: sans-serif; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
} 
body { 
    margin: 0; 
} 

Le code le plus proche de mon bootstrap est:

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('../fonts/glyphicons-halflings-regular.eot'); 
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') 
    format('embedded-opentype'), 
    url('../fonts/glyphicons-halflings-regular.woff2') 
    format('woff2'), 
    url('../fonts/glyphicons-halflings-regular.woff') 
    format('woff'), 
    url('../fonts/glyphicons-halflings-regular.ttf') 
    format('truetype'), 
    url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') 
    format('svg'); 
} 
.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

mais pour autant que je sache, ce code juste pour afficher une icône

Je ne sais pas comment changer ce code pour afficher ma propre police

Answer 1

Il suffit d'utiliser suivant CSS à votre fichier CSS qui devrait inclure après bootstrap ..

@font-face { 
    font-family: <Your-font>; 
    src: url(<your-font-path>); 
} 
html, body { 
    font-family: <Your-font>, sans-serif; /*Specify your font name here*/ 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
} 

Answer 2

dans le fichier style.css u besoin de lier la famille de polices, donnez votre chemin de police dans src

@font-face { 
font-family: 'sans-serif'; 
font-weight: normal; 
font-style: normal; 
src: url('../fonts/sans-serif.eot') format('embedded-opentype'), url('../fonts/sans-serif.woff') format('woff'), url('../fonts/sans-serif.ttf') format('truetype'), url('../fonts/sans-serif.otf') format('opentype'), url('../fonts/sans-serif.svg#sans-serif') format('svg'); 
}