Search code examples
cssfontsfont-facecloud.typography

@font-face with a .css file used as the source?

I've been given the path (which I have shortened) to a Gotham font...

https://cloud.typography.com/[path shortened]/css/fonts.css

Can I use it in a @font-face definition (doesn't seem to work - examples don't use .css as a valid src)?

@font-face {
  font-family: 'Gotham';
  src: url("https://cloud.typography.com/[path shortened]/css/fonts.css");
  font-family: "Gotham SSm A", "Gotham SSm B";
  font-style: normal;
  font-weight: 400;
}

so that I can use it like:

body {
    font-family: 'Gotham', sans-serif; 
}

I'm obviously missing something as it's always using the sans-serif fallback, not the required font.

NB The font is paid for and is being tested on the domain that has been correctly licensed by typography for the font)

Solution

  • use this on your main css code and call the font name in the font.css as your font-face. this should work

    @import url('https://cloud.typography.com/[path shortened]/css/fonts.css');