How to change bootstrap.css source HTML to my own loaded font
I tried to find how to do this, at least this link almost got me. but he / she uses the link to change the font.
but I have my own downloaded font using font converter (.eot.otf.svg.ttf.woff.woff2)
and mine style.css
is like below:
/* 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;
}
This is a piece of my bootstrap.css html code:
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
Most similar code from my bootstrap:
@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;
}
but as far as I know this code just displays the icon
I don't know how to change this code to display my own font
+3
source to share
2 answers
Just use CSS for your CSS file, which should include after 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%;
}
+2
source to share
In your style.css file you need to link the font family, provide the font path in 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');
}
0
source to share