Search code examples
csstruetypegoogle-fonts

Google fonts no longer supports downloaded files?

I have downloaded .ttf files from google fonts to my local css folder, but can't seem to load them properly. I have tried these approaches:

CSS

@import url('./css/css?family=Cabin+Condensed:400,500,600,700');

@font-face {
    font-family: 'Cabin Condensed';
    font-style: normal;
    font-weight: 700;
    src: local('Cabin Condensed') format('truetype');
}

body, html {
    font-family: 'Cabin Condensed', sans-serif;
}

HTML

<link href="./css/css?family=Cabin+Condensed:400,500,600" rel="stylesheet">

I don't get any errors, but the font is not displayed either. Strangely, the official docs don't even mention local fonts.

Solution

  • Seems to me the problem is using the local path which requires the font to be installed locally.

    Try dropping the @import and add a fallback of src: url to your src: local:

    @font-face {
    font-family: 'Cabin Condensed';
    src: local('Cabin Condensed'), url(<path to the TTF file>);
}

    e.g:

    @font-face {
    font-family: 'Cabin Condensed';
    src: local('Cabin Condensed'), url('/css/fonts/Cabin-Condensed.ttf');
}