Is it possible to specify custom name for a Google Font?

Question

Here is a sample CSS

h1 {
   font-family: 'header-font', arial, sans-serif;
}

p {
   font-family: 'paragraph-font', arial, serif;
}

Is it possible to load any remote Google Font (let say 'Lato') so that it's family name in CSS would be 'header-font'?

Edit: The idea behind this is to be able to easily swap fonts in a WP theme. Unfortunately using variables in CSS preprocessors is not an option in my case.

Audun

Why would you want to do this? Would it not cause issues if a user had a local font matching your custom font name? – Ecto

Possible duplicate of Google fonts: Define custom name in CSS – Hallsy

Answer 1

Yes, you can give any name you want when you define the font family in the @font-face style declaration and use that name to reference it later in the stylesheet.

@font-face
{
  font-family: whateverYouWant;
  src: url('example.ttf'),
       url('example.eot');
       ... /* and so on */
}

Whatever you name the style as in the font-family property is how it will be referred to from the rest of the document. However I don't know how it competes with local font files (so if you tried to name a custom font Arial I'm not sure what you would get - the custom font or the real Arial). I don't know why you would do that anyway though.

Elenaelenchus

This would only work if you are locally storing the font. The google font has a predefined name. – Vivacious

No, this WILL work. Just be careful you name font-family something guaranteed to be unique, maybe with a website identifier like font-family: 'abcweb-header-font;'. codepen.io/anon/pen/hAvcp – Fleawort

So where is the Google font integration? – Venial

This does not answer the question. For example How would you call a googlefont and give it a custom name of 'my-website-generic' – Sse

Answer 2

Yes, very easily. Once you located the font at Google, eg.

@import url('https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext');

just direct your browser to the url specified:

https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext

What you get back is the @font-face CSS item for the font (or fonts). Simply use this verbose version in your CSS instead of the original @import specification. You can freely rename the font-family item in any of these descriptions. Yes, you have to make sure there are no clashes with other fonts but the naming is completely up to you.

Floatstone

That's a good starting point, but be aware that the CSS returned by google font is dependent on the browser. – Nag

Answer 3

I don't think you can to be honest. The Google font has a predefined name when you view the google font. See this for example: http://fonts.googleapis.com/css?family=Akronim

Its name is set as 'Akronim' and I dont think you can reference it by any other name.

Vivacious