如何阻止Google字体请求本地字体？

Question

I've been trying to use the Ubuntu fonts for my website using the Google Fonts API but I've ran into a problem because of a conflict between the Ubuntu fonts Google has and the local Ubuntu fonts installed on my machine. The end result is that I can't use the Ubuntu fonts at font-weight 400; I am restricted to font-weight 300 and 500. The main site is in font-weight 300 anyway, but I was hoping to use font-weight 400 to give some emphasis to my headings.

I'd like to circumvent this by editing the CSS that Google Fonts uses to remove all references to local fonts. I have tried this manually and it works. The problem is that the CSS Google provides is customized to the browser, so editing the CSS I see and storing that locally will result in the fonts only working for people using the same browser as me.

So, would it be possible to edit the CSS on the fly to remove references to local fonts?

.

I have an idea of a rough solution, but am insufficiently educated to know if it can actually be implemented. Basically, one could have a PHP script that the end user requests through <link rel="css.php">. This PHP file reads the HTTP request of the user including information about the browser, then shoots off a request to Google Fonts API with the exact same HTTP information. Google Fonts provides the CSS our user needs. The rest is string manipulation. Could this work?

Answer 1

You'll have to make the font request manually then. So, you may be requesting http://fonts.googleapis.com/css?family=Ubuntu. Go there (in different browsers - it serves requests per browser) and copy the code. I'll just use what it gives me in Chrome for now, but there'll be different font formats you'll want to include. It says:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
}

Copy that it your local CSS, removing the local in the source parameter. Then, just change the font-family name to something like.

@font-face {
  font-family: 'Webuntu';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
}

Finally, update your font references to use the new name:

p { font-family:'Webuntu', sans-serif; }

No PHP necessary :)