Source sans pro font in html

Question

I would like to use googles "source sans pro" font in the font-family attribute in CSS, in my HTML site. I use Bootstrap as a front end framework.

https://www.google.com/fonts/specimen/Source+Sans+Pro

How can I achieve that? Do I have to include the file into my html site?

Thank you for any help!

Answer 1

Add this string in head section of your site:

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

Then use this font:

h1 {
  font-family: 'Source Sans Pro', sans-serif;
}

Answer 2

The instructions are given on the link at the top of the page you show. https://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro

You include this in the head of your page:

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

and specify the font family in your CSS.

element {
    font-family: "Source Sans Pro"
]

Answer 3

The fonts

You can select the fonts you want and you get a link: for HTML

https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,900italic,900,700italic,700,600italic,600,400italic,300italic,300,200italic' rel='stylesheet' type='text/css'>

paste this link in your

Then use this in your css

font-family: 'Source Sans Pro', sans-serif;

so something like this

.class{
    font-family: 'Source Sans Pro', sans-serif;
}