0
I have a bootstrap system and need to change the FONT of all pages.
Can you change this only in bootstrap.min.css and not have to file by file? How to do?
The font-family I need is not the one that comes standard in bootstrap.
2 answers
2
This is the pattern of font-family used in the body of Bootstrap 4 as you can check this link:https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css
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 the font-family in the bootstrap.min.css in this class and you change to the entire website.
body {
font-family: 'minha-fonte', Helvetica;
}
You can also make a override thus, where in font.css you declare your font-family in the body, but note that it has to come after the Bootstrap css:
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="minhafont.css">
1
you can set a class in the body tag or after the body create a div right after the body(which is most recommended).
I do not recommend you make changes to the bootstrap file, but nothing prevents you from touching this file
Example 1, you can reference in a separate styles file. In this case, you make all styles below your div are 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 in your style file would be the following code:
.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 don’t need to create a class in the CSS, you make this change in the body itself. (Remembering that in this case it does not override the fact that you create a class in your style, I just changed the place where the style was created.)
These are only 2 of the N ways you can make the change.
For more information about CSS classes, visit here
If you want to know more information about font recommend this site here
Try this and see if it works for you.
Browser other questions tagged html css twitter-bootstrap font
You are not signed in. Login or sign up in order to post.
Make use of the cascade effect. The cascade effect determines the priority for applying the style rule to the element as described below and in the descending order of priority: 1 - within an HTML tag (defined via the style attribute in the elements); 2 - internal stylesheet (defined in the HEAD section of the page itself); 3 - external style sheet (imported or linked); So include your style sheet by changing the Fontafter boostrap style sheet.
– user60252