CODEWITHSUNDEEP
css
Xilas
Xilas

Reputation: 17

Two .CSS style in one page?

So I'm currently trying to combine 2 separate .css files for my landing page. They both import different google fonts, problem is, as you all know the last .css style will override the first. Is there a good way to handle this issue or is it something that is not normally done? All class names are different as well.

<link href='http://fonts.googleapis.com/css?family=Raleway:600,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>

maybe Im just not calling for the .css in the correct way...If you need more info from me, let me know. Is this a common issue?

Upvotes: 0

Views: 122

Answers (3)

4dgaurav
4dgaurav

Reputation: 11496

Take advantage of Font Pairings.

In that case, you put a pipe character (vertical line) between each font type.

The code would appear as follows:

<link href='http://fonts.googleapis.com/css?family=Raleway:600,900|Lato:300,400,700' rel='stylesheet' type='text/css'>

You can read more here

Upvotes: 0

samayres1992
samayres1992

Reputation: 779

Google fonts allows you to add all fonts into a collection, because you are doing it separately, it is getting overwritten. 

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300italic|Raleway:600,900' rel='stylesheet' type='text/css'>

Upvotes: 2

Danny van Holten
Danny van Holten

Reputation: 932

this shouldn't be any problem at all. the Google fonts will be loaded separately. And you will call them into your css by writing the following code

h1, h2, h3 {
    font-family: 'Raleway';
}

p {
    font-family: 'Lato';
}

Upvotes: 0

Related Questions