Two .CSS style in one page?

Question

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?

what's your problem exactly ? do you meet any conflict in using those fonts ? — Oliboy50
– Oliboy50, Commented Jul 31, 2014 at 6:48
How do you expect us to do anything, you choose the design of your website, I don't understand why you need us to tell you which css rule to keep — singe3
– singe3, Commented Jul 31, 2014 at 6:48
I think it won't give any issue. Because both are different fonts and you are going refer with different names. No issues. — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Jul 31, 2014 at 6:48
You can actually combine them into one line using the pipe delimiter (like <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:600,900' rel='stylesheet' type='text/css'>) — Harry
– Harry, Commented Jul 31, 2014 at 6:49
It is not true that “the last .css style will override the first”, so what is the problem. (If CSS declarations conflict, then the last one wins other things being equal, but you have not shown any CSS declarations.) — Jukka K. Korpela
– Jukka K. Korpela, Commented Jul 31, 2014 at 7:52

Bindiya Patoliya · Accepted Answer · 2014-07-31 06:52:01Z

2

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'>

edited Jul 31, 2014 at 6:52

Bindiya Patoliya

2,7821 gold badge18 silver badges16 bronze badges

answered Jul 31, 2014 at 6:50

samayres1992

7792 gold badges12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danny van Holten · Accepted Answer · 2014-07-31 06:49:46Z

0

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';
}

answered Jul 31, 2014 at 6:49

Danny van Holten

9325 silver badges23 bronze badges

Comments

4dgaurav · Accepted Answer · 2014-07-31 06:52:41Z

0

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

answered Jul 31, 2014 at 6:52

4dgaurav

11.5k4 gold badges35 silver badges59 bronze badges

Collectives™ on Stack Overflow

Two .CSS style in one page?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related