Google Fonts and CSS

HTML & CSS
1

Hi,

In my site I see there are 2 fonts loaded in the header

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>

My site is based on Wordpress and I googled for ways find out how to not load them in header. I found out about the methods in Google Fonts (Standard, Import, Javascript) and Enqueuing.

My question is why can’t I just copy paste the CSS code to my site main style.css?
For eg: for the font Roboto Condensed I could just copy paste the following to my style.css

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(http://fonts.gstatic.com/s/robotocondensed/v13/Zd2E9abXLFGSr9G3YK2MsFzqCfRpIA3W6ypxnPISCPA.woff) format('woff');
}

I didn’t see anyone mention something like that. Is it bad for performance? Am I missing something? I just tested it with my site and I don’t see any problems.

Thanks

2

Google gives you the link tags because it’s the easiest method to implement. Copy and paste it in your HTML. I’d imagine that almost noone (maybe 1 or two people…) could screw that up.

Why do you want to load that in your CSS? You’re still making a HTTP request.

Also I’ll ignore the glaring flaw that you only have .woff declared, which won’t give you a lot of cross browsersupport.

3

Thanks a lot for replying mate.
Im trying to “reduce” the HTTP requests.

Please correct me if I wrong. Im trying to learn/understand.
As I said I have 2 Google Fonts used. So that means I have totally 3 requests including main stylesheet.
If I put those google fonts CSS codes in my main stylesheet, doesn’t that mean I reduce HTTP requests to 1?
Isn’t that better?

What did you mean by woff declared, browser support? Do you mean if I put the Font CSS like that, there could be issues in Responsiveness?

Thanks

4

No, the page will request the css file, that’s 1.
Then it will request the 2 fonts that are in the css file, that’s 3, you gain nothing.

5

Thanks for the reply mate.
Are there any other disadvantages by putting font CSS like that?
Apparently Woff v1 is supported for nowadays browsers
http://blog.linotype.com/2011/07/webfonts-update-woff-format-now-supported-by-all-major-browsers/

Regards,
Harsha

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.