Using a different font with twitter bootstrap

Question

I want to use a different font for my website  which is not a regular webfont  I have created EOT files already  Now how can I integrate those fonts with twitter bootstrap   Can anyone help    Thanks

User · Answer

Hi you can create a customized build on bootstrap, just change the font name in the following pages

Bootstrap 2.3.2 http://getbootstrap.com/2.3.2/customize.html#variables

Bootstrap 3 http://getbootstrap.com/customize/#less-variables

After that, make sure to use proper @font-face in a css file and link that to your page. Or you could use font kit generators.

User · Answer

First of all you have to include your font in your website  or your CSS  to be more specific  using an appropriate  font-face rule  From here on there are multiple ways to proceed  One thing I would not do is to edit the bootstrap css directly - since once you get a newer version your changes will be lost  You do however have the possibility to customize your bootstrap files  there s a customize page on their website   Just enter the name of your font with all the fallback names into the corresponding typography textbox  Of course you will have to do this whenever you get a new or updated version of your bootstrap files  Another chance you have is to overwrite the bootstrap rules within a different stylesheet  If you do this you just have to use selectors that are as specific as  or more specific than  the bootstrap selectors  Side note  If you care about browser support a single EOT version of your font might not be sufficient  See http   caniuse com eot for a support table

User · Answer

you can customize twitter bootstrap css file  open the bootstrap css file on a text editor  and change the font-family with your font name and SAVE it   OR got to http   getbootstrap com customize  and make a customized twitter bootstrap

User · Answer

You can find a customizer on the official website  which allows you to set some LESS variables  as  font-family-base  Link your custom fonts in your layout  and use your custom generated bootstrap style   Link here  For an example with the  font-face rule  using WOFF format  which is pretty good for browser compatibility   add this CSS in your app css file and include your custom boostrap css file    font-face     font-family   Proxima Nova     font-style   normal    font-weight  400    src  url link-to-proxima-nova-font woff  format  woff        Please note Proxima Nova is under a license

User · Answer

The easiest way I ve seen is to use Google Fonts   Go to Google Fonts and choose a font  then  Google will give you a link to put in your HTML     Then add this to your custom css   h1  h2  h3  h4  h5  h6       font-family   Your Font   important    p  div       font-family   Your Font   important      or  body      font-family   Your Font   important

[css] Using a different font with twitter bootstrap

Examples related to css

Examples related to html

Examples related to twitter-bootstrap

Examples related to responsive-design

Examples related to twitter-bootstrap-3