How can I change the Bootstrap default font family using font from Google

Question

I am creating a blog site and I want to change the Bootstrap font  In my import CSS in header I added this font   lt link href  http   fonts googleapis com css family Oswald 400 300 700  rel  stylesheet  type  text css  gt    How can I use this as my bootstrap default font

User · Answer

I am using React Bootstrap  which is based on Bootstrap 4  The approach is to use Sass  simliar to Nelson Rothermel s answer above  The idea is to override Bootstraps Sass variable for font family in your custom Sass file  If you are using Google Fonts  then make sure you import it at the top of your custom Sass file  For example  my custom Sass file is called custom sass with the following content   import url  https   fonts googleapis com css2 family Dancing Script amp display swap         font-family-sans-serif   quot Dancing Script quot   -apple-system  BlinkMacSystemFont   quot Segoe UI quot   Roboto   quot Helvetica Neue quot   Arial   quot Noto Sans quot   sans-serif   quot Apple Color Emoji quot    quot Segoe UI Emoji quot    quot Segoe UI Symbol quot    quot Noto Color Emoji quot   default   I simply added the font I want to the front of the default values  which can be found in    node modules boostrap dist scss  variables scss  How the custom scss file is used is shown here  which is obtained from here  which is obtained from here    Because the React app is created by the Create-React-App utility  there s no need to go through all the crufts like Gulp  I just saved the files and React will compile the Sass for me automagically behind the scene

User · Answer

If you want the font you chose to be applied and not the one in bootstrap without modifying the original bootstrap files you can rearrange the  tags in your HTML documents so your CSS files that applies the font called after the bootstrap one  In this way since the browser reads the documents line after line first it will read the bootstrap files and apply it roles then it will read your file and override the roles in the bootstrap and replace it with the ones in your file

User · Answer

Another way is to download source code then change following vaiables in variables less   font-family-sans-serif    Helvetica Neue   Helvetica  Arial  sans-serif   font-family-serif        Georgia   Times New Roman   Times  serif       Default monospace fonts for   lt code gt      lt kbd gt    and   lt pre gt     font-family-monospace    Menlo  Monaco  Consolas   Courier New   monospace   font-family-base          font-family-sans-serif    And then compile it to  css file

User · Answer

This is the best and easy way to import font from google and this is also a  standard method to import font   Paste this code on your index page or on header   lt link href  http   fonts googleapis com css family Oswald 400 300 700  rel  stylesheet  type  text css  gt    other method is to import on css like this    import url http   fonts googleapis com css family Oswald 400 300 700     on your Css file as this code   body     font-family   Oswald   sans-serif  important      Note   The  import code line will be the first lines in your css file  style css  etc css   They can be used in any of the  css files and should always be the first line in these files  The following is an example

User · Answer

The bootstrap-live-customizer is a good resource for customising your own bootstrap theme and seeing the results live as you customise   Using this website its very easy to just edit the font and then download the updated  css file

User · Answer

If you have a custom css file  in there  just do something like   font-family   Oswald   Helvetica  Arial  sans-serif important

User · Answer

I know this is a late answer but you could manually change the 7 font declarations in the latest version of Bootstrap   html     font-family  sans-serif     body     font-family  sans-serif     pre  code  kbd  samp     font-family  monospace     input  button  select  optgroup  textarea     font-family  inherit      tooltip     font-family  sans-serif      popover     font-family  sans-serif      text-monospace     font-family  monospace      Good luck

User · Answer

I think the best and cleanest way would be to get a custom download of bootstrap   http   getbootstrap com customize   You can then change the font-defaults in the Typography  in that link   This then gives you a  Less file that you can make further changes to defaults with later

User · Answer

First of all  you can t import fonts to CSS that way  You can add this code in HTML head   lt link href  http   fonts googleapis com css family Oswald 400 300 700  rel  stylesheet  type  text css  gt   or to import it in CSS file like this   import url  quot http   fonts googleapis com css family Oswald 400 300 700 quot     Then  in your css  you can edit the body s font-family  body     font-family   Oswald   sans-serif  important

User · Answer

If you use Sass  there are Bootstrap variables are defined with  default  among which you ll find font families   You can just set the variables in your own  scss file before including the Bootstrap Sass file and  default will not overwrite yours   Here s a good explanation of how  default works  https   thoughtbot com blog sass-default   Here s an untested example using Bootstrap 4  npm  Gulp  gulp-sass and gulp-cssmin to give you an idea how you could hook this up together   package json       devDependencies          bootstrap    4 0 0-alpha 6        gulp    3 9 1        gulp-sass    3 1 0        gulp-cssmin    0 2 0          mysite scss   import    myvariables       Bootstrap  import  bootstrap scss variables          need to include other bootstrap files here   Check node modules bootstrap scss bootstrap scss for a list    myvariables scss     For a list of Bootstrap variables you can override  look at node modules bootstrap scss  variables scss     These are the defaults  but you can override any values  font-family-sans-serif  -apple-system  system-ui  BlinkMacSystemFont   Segoe UI   Roboto   Helvetica Neue   Arial  sans-serif  default   font-family-serif       Georgia   Times New Roman   Times  serif  default   font-family-monospace   Menlo  Monaco  Consolas   Liberation Mono    Courier New   monospace  default   font-family-base         font-family-sans-serif  default    gulpfile js  var gulp   require  gulp        sass   require  gulp-sass        cssmin   require  gulp-cssmin     gulp task  transpile sass   function         return gulp src    mysite scss            pipe sass   includePaths     node modules     on  error   sass logError            pipe cssmin             pipe gulp dest    css            index html   lt html gt       lt head gt           lt link rel  stylesheet  type  text css  href  mysite css    gt       lt  head gt       lt body gt                   lt  body gt   lt  html gt

[html] How can I change the Bootstrap default font family using font from Google?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to fonts