Google fonts: Define custom name in CSS

问题

Is it possible to define a custom name for Google fonts?

Eg. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

How to use 'Open Sans' with custom name?

div {
   font-family: 'custom'; // to be same as 'Open Sans'
}

Using @font-face as answered here is not possible, since I don't have url to source files (ttf, eot, woff, ...).

Links to source files on Google cdn would solve this issue.

回答1:

This code will work in your case:

<style type="text/css">
@font-face {
    font-family: 'MyCustomOpenSans';
    font-style: normal;
    font-weight: 400;
    src: 
        local('Open Sans'), 
        local('OpenSans'), 
        url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), 
        url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
p {font-family: "MyCustomOpenSans", sans-serif;}
</style>

I'm not sure if it's a stable enough because the URL will change if there's a new update to the font and I'm not sure if Google will ban access to the other URL.

EDIT:

The WOFF format is supported by IE9+, Firefox, Chrome etc. Source: http://caniuse.com/#feat=woff

The WOFF2 format is less supported: http://caniuse.com/#search=woff2

回答2:

You could download the font and supply your own name for it using @font-face {}

Convert the font using a font converter.

Then change the font name like this...

@font-face {
  font-family: 'super-wicked-font-yeahhh'; /* CHANGE HERE */
  src: url('fontawesome/fontawesome-webfont.eot');
  src: url('fontawesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fontawesome/fontawesome-webfont.svg#svgFontName') format('svg'),
     url('fontawesome/fontawesome-webfont.woff') format('woff'), 
     url('fontawesome/fontawesome-webfont.ttf')  format('truetype');
}

Then call the font using:

p {
  font-family: super-wicked-font-yeahhh;
}

来源：https://stackoverflow.com/questions/28172964/google-fonts-define-custom-name-in-css