Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using a different font with twitter bootstrap

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

like image 238
dxenaretionx Avatar asked Sep 11 '13 12:09

dxenaretionx


People also ask

How do I use different fonts in Bootstrap?

Importing Your Web Font After you extract the zip file you generated above (or if you already have a webfont), right click the Fonts group in Bootstrap Studio and choose Import Webfont . In the file browser, navigate to the webfont and select the css file in the folder.

What fonts are available in Bootstrap?

Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5. The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif. In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

Can you use custom fonts in CSS?

Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.

What is Bootstrap 5 default font family?

Bootstrap 5 Default Settings Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5.


1 Answers

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.

Google's link to your font

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; } 
like image 89
Kyle Pennell Avatar answered Oct 02 '22 11:10

Kyle Pennell