Bootstrap - Change font

Question

Bootstrap - Change font

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a bootstrap system and I need to change the FONT of all pages.

Can you only change this in bootstrap.min.css and not have to do file by file? How to do?

The font-family I need is not the default bootstrap.

html css twitter-bootstrap font

asked by anonymous 04.07.2018 / 00:50

2 answers

What are the real differences in creating a project with Expo and without Expo (MySql) Insert or Update in the database

score 1 · Answer 1

You can define a class in the body tag or after the body create a div just after the body (which is most recommended).

I do not recommend you make any changes to the bootstrap file, but nothing prevents you from touching this file

Example 1 , you can refer to a separate style file. In this case, you make all the styles below your div respected

<head>
<link rel="stylesheet" href=".../estilos/estilo.css" rel="stylesheet"> //aqui você informa onde está o seu arquivo de estilos
</head>
<body>
<div class="altera-fontes">
              //Aqui estará todo o conteúdo das suas páginas
</div>
</body>

And your style file would look like this:

.altera-fontes {
   font-style: normal; //caso queira deixar alterar o estilo da fonte
   font-size: 2.5em; //caso queira alterar o tamanho da fonte
   font-family: "Times New Roman" //caso queira mudar o tipo de fonte

}

Example 2 Create a style in your html and make the change there

</head>
<style>
   body{
         font-style: normal; //caso queira deixar alterar o estilo da fonte
         font-size: 2.5em; //caso queira alterar o tamanho da fonte
         font-family: "Times New Roman" //caso queira mudar o tipo de fonte
   }
</style>
<body>

In this second case, you do not need to create a class in CSS, you make this change in the body itself. (Remember that in this case it does not nullify the fact that you create a class in your style, I just changed the place where the style was created.)

These are just 2 of the N ways you can make the change.

For more information on CSS classes, visit here

If you want to know more about font I recommend this site here

Try this and see if this works for you.

score 1 · Answer 2

This is the default of font-family used in body of Bootstrap 4 as you can see in this link:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

Just replace font-family in bootstrap.min.css with this class and you change to entire site.

body {
  font-family: 'minha-fonte', Helvetica; 
}

You can do an override this way, where in font.css you declare your font-family in body , but notice that it has to come after the Bootstrap css:

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="minhafont.css">