lightify
lightify copied to clipboard
font urls getting mangled
Given font urls like these:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,400i,700&display=swap" rel="stylesheet">
They're getting mangled such that what ultimately winds up in the rendered markup is:
<style>@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
font-display: swap;
src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.googleapis.com/https:/fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzc.ttf?family=Roboto:300,400,400i,500,700&display=swap) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.googleapis.com/https:/fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc9.ttf?family=Roboto:300,400,400i,500,700&display=swap) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(//fonts.googleapis.com/https:/fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxP.ttf?family=Roboto:300,400,400i,500,700&display=swap) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.googleapis.com/https:/fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc9.ttf?family=Roboto:300,400,400i,500,700&display=swap) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.googleapis.com/https:/fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc9.ttf?family=Roboto:300,400,400i,500,700&display=swap) format('truetype');
}
</style>
<style>@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
font-display: swap;
src: local('Merriweather Italic'), local('Merriweather-Italic'), url(//fonts.googleapis.com/https:/fonts.gstatic.com/s/merriweather/v21/u-4m0qyriQwlOrhSvowK_l5-eRZOf-c.ttf?family=Merriweather:400,400i,700&display=swap) format('truetype');
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Merriweather Regular'), local('Merriweather-Regular'), url(//fonts.googleapis.com/https:/fonts.gstatic.com/s/merriweather/v21/u-440qyriQwlOrhSvowK_l5-fCZJ.ttf?family=Merriweather:400,400i,700&display=swap) format('truetype');
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Merriweather Bold'), local('Merriweather-Bold'), url(//fonts.googleapis.com/https:/fonts.gstatic.com/s/merriweather/v21/u-4n0qyriQwlOrhSvowK_l52xwNZWMf_.ttf?family=Merriweather:400,400i,700&display=swap) format('truetype');
}
</style>
Those fonts.googleapis.com links just point at the smaller stylesheets for each font. Contents of the url within those stylesheets should be formatted like:
url(//fonts.gstatic.com/s/merriweather/v21/u-4n0qyriQwlOrhSvowK_l52xwNZWMf_.ttf?family=Merriweather:400,400i,700&display=swap)
But instead are hanging onto part of the original link src, and mangling things to be like:
url(https://fonts.googleapis.com/https:/fonts.gstatic.com/s/merriweather/v21/u-4n0qyriQwlOrhSvowK_l52xwNZWMf_.ttf?family=Merriweather:400,400i,700&display=swap)
The issue can be worked around by manually pulling those smaller stylesheets in and dropping them into the source document in style tags, but ideally they shouldn't have to be.