How to change bootstrap.css font-family HTML to my own downloaded font

Question

I've tried to find how to do that, at least this link almost got me. but she/he is using link to change the font.

but I've my own downloaded font using font converter (.eot .otf .svg .ttf .woff .woff2)

and I have style.css 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 piece of code of my bootstrap.css html:

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

The most similar code of my bootstrap is:

@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 to displaying some icon

I don't know how to change that code to displaying my own font

Are you using the compiled code or the source code (LESS, SASS)? — Lee Wise, Jul 18 '17 at 05:27
You don't really need to include all of these font formats. Woff is good enough. http://caniuse.com/#feat=woff — I haz kode, Jul 18 '17 at 05:32

Super User · Accepted Answer · 2017-07-18T05:30:02.800

5

Just use following CSS to 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%;
}

edited Jul 18 '17 at 05:30

answered Jul 18 '17 at 05:28

Super User

9,448
3
31
47

what about the `@import` of the local font itself? – Jorg Jul 18 '17 at 05:28
I've edited my post more details, and can i use `@font-face` twice? – Flix Jul 18 '17 at 05:33
like `@font-face_1`? – Flix Jul 18 '17 at 05:39
2

@RedRiver for reference check http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700 – Super User Jul 18 '17 at 07:30

score 1 · Answer 2 · answered Jul 18 '17 at 05:29

1

In style.css file u need to link the font-family, give your 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');
}

answered Jul 18 '17 at 05:29

Santhoshkumar

780
1
16
36

I want to change sans-serif font to my own downloaded font not the other way around – Flix Jul 18 '17 at 05:35

How to change bootstrap.css font-family HTML to my own downloaded font

2 Answers2