CODEWITHSUNDEEP
csstruetypegoogle-fonts
Kokodoko
Kokodoko

Reputation: 28148

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.

Upvotes: 0

Views: 215

Answers (1)

Koby Douek
Koby Douek

Reputation: 16693

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');
}

Upvotes: 2

Related Questions