Today I ran into a Google Font that's not loaded the usual way, and I'm hoping that someone can clarify this for me.
Why do some Google Fonts not have specified subsets in the stylesheets?
Here's an example of Roboto:
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
And here's an example of Train One:
Full stylesheet can be found here: https://fonts.googleapis.com/css?family=Train+One
/* [2] */
#font-face {
font-family: 'Train One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/trainone/v13/gyB-hwkiNtc6KnxUVjWHP87JR5-7NdB589yspgpx0N7r5-25NB8.2.woff2) format('woff2');
unicode-range: U+ffd7, U+ffda-ffdc, U+ffe0-ffe2, U+ffe4, U+ffe6, U+ffe8-ffee, U+1f100-1f10c, U+1f110-1f16c, U+1f170-1f1ac, U+1f200-1f202, U+1f210-1f234;
}
/* [3] */
#font-face {
font-family: 'Train One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/trainone/v13/gyB-hwkiNtc6KnxUVjWHP87JR5-7NdB589yspgpx0N7r5-25NB8.3.woff2) format('woff2');
unicode-range: U+fa10, U+fa12-fa6d, U+fb00-fb04, U+fe10-fe19, U+fe30-fe42, U+fe44-fe52, U+fe54-fe66, U+fe68-fe6b, U+ff02, U+ff04, U+ff07, U+ff51, U+ff5b, U+ff5d, U+ff5f-ff60, U+ff66, U+ff69, U+ff87, U+ffa1-ffbe, U+ffc2-ffc7, U+ffca-ffcf, U+ffd2-ffd6;
}
/* [5] */
#font-face {
font-family: 'Train One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/trainone/v13/gyB-hwkiNtc6KnxUVjWHP87JR5-7NdB589yspgpx0N7r5-25NB8.5.woff2) format('woff2');
unicode-range: U+9e8b-9e8c, U+9e8e-9e8f, U+9e91-9e92, U+9e95-9e96, U+9e98, U+9e9b, U+9e9d-9e9e, U+9ea4-9ea5, U+9ea8-9eaa, U+9eac-9eb0, U+9eb3-9eb5, U+9eb8, U+9ebc-9ebf, U+9ec3, U+9ec6, U+9ec8, U+9ecb-9ecd, U+9ecf-9ed1, U+9ed4-9ed5, U+9ed8, U+9edb-9ee0, U+9ee4-9ee5, U+9ee7-9ee8, U+9eec-9ef2, U+9ef4-9ef9, U+9efb-9eff, U+9f02-9f03, U+9f07-9f09, U+9f0e-9f12, U+9f14-9f17, U+9f19-9f1b, U+9f1f-9f22, U+9f26, U+9f2a-9f2c, U+9f2f, U+9f31-9f32, U+9f34, U+9f37, U+9f39-9f3a, U+9f3c-9f3f, U+9f41, U+9f43-9f47, U+9f4a, U+9f4e-9f50, U+9f52-9f58, U+9f5a, U+9f5d-9f61, U+9f63, U+9f66-9f6a, U+9f6c-9f73, U+9f75-9f77, U+9f7a, U+9f7d, U+9f7f, U+9f8f-9f92, U+9f94-9f97, U+9f99, U+9f9c-9fa3, U+9fa5, U+9fb4, U+9fbc-9fc2, U+9fc4, U+9fc6, U+9fcc, U+f900-f92c;
}
/* [6] */
#font-face {
font-family: 'Train One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/trainone/v13/gyB-hwkiNtc6KnxUVjWHP87JR5-7NdB589yspgpx0N7r5-25NB8.6.woff2) format('woff2');
unicode-range: U+9c3e, U+9c41, U+9c43-9c4a, U+9c4e-9c50, U+9c52-9c54, U+9c56, U+9c58, U+9c5a-9c61, U+9c63, U+9c65, U+9c67-9c6b, U+9c6d-9c6e, U+9c70, U+9c72, U+9c75-9c78, U+9c7a-9c7c, U+9ce6-9ce7, U+9ceb-9cec, U+9cf0, U+9cf2, U+9cf6-9cf7, U+9cf9, U+9d02-9d03, U+9d06-9d09, U+9d0b, U+9d0e, U+9d11-9d12, U+9d15, U+9d17-9d18, U+9d1b-9d1f, U+9d23, U+9d26, U+9d2a-9d2c, U+9d2f-9d30, U+9d32-9d34, U+9d3a, U+9d3c-9d3f, U+9d41-9d48, U+9d4a, U+9d50-9d54, U+9d59, U+9d5d-9d65, U+9d69-9d6c, U+9d6f-9d70, U+9d72-9d73, U+9d76-9d77, U+9d7a-9d7c, U+9d7e, U+9d83-9d84, U+9d86-9d87, U+9d89-9d8a, U+9d8d-9d8e, U+9d92-9d93, U+9d95-9d9a, U+9da1, U+9da4, U+9da9-9dac, U+9dae, U+9db1-9db2, U+9db5, U+9db8-9dbd, U+9dbf-9dc4, U+9dc6-9dc7, U+9dc9-9dca, U+9dcf, U+9dd3-9dd7, U+9dd9-9dda, U+9dde-9de0, U+9de3, U+9de5-9de7, U+9de9, U+9deb, U+9ded-9df0, U+9df3-9df4, U+9df8, U+9dfd-9dfe, U+9e02, U+9e07, U+9e0a, U+9e0d-9e0e, U+9e10-9e12, U+9e15-9e16, U+9e19-9e1f, U+9e75, U+9e79-9e7d, U+9e80-9e85, U+9e87-9e88;
}
/* [7] */
#font-face {
font-family: 'Train One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/trainone/v13/gyB-hwkiNtc6KnxUVjWHP87JR5-7NdB589yspgpx0N7r5-25NB8.7.woff2) format('woff2');
unicode-range: U+9ae5-9ae7, U+9ae9, U+9aeb-9aec, U+9aee-9aef, U+9af1-9af5, U+9af7, U+9af9-9afb, U+9afd, U+9aff-9b06, U+9b08-9b09, U+9b0b-9b0e, U+9b10, U+9b12, U+9b16, U+9b18-9b1d, U+9b1f-9b20, U+9b22-9b23, U+9b25-9b2f, U+9b32-9b35, U+9b37, U+9b39-9b3b, U+9b3d, U+9b43-9b44, U+9b48, U+9b4b-9b4f, U+9b51, U+9b55-9b58, U+9b5b, U+9b5e, U+9b61, U+9b63, U+9b65-9b66, U+9b68, U+9b6a-9b6f, U+9b72-9b79, U+9b7f-9b80, U+9b83-9b87, U+9b89-9b8b, U+9b8d, U+9b8f-9b94, U+9b96-9b97, U+9b9a, U+9b9d-9ba0, U+9ba6-9ba7, U+9ba9-9baa, U+9bac, U+9bb0-9bb2, U+9bb4, U+9bb7-9bb9, U+9bbb-9bbc, U+9bbe-9bc1, U+9bc6-9bc8, U+9bca, U+9bce-9bd2, U+9bd4, U+9bd7-9bd8, U+9bdd, U+9bdf, U+9be1-9be5, U+9be7, U+9bea-9beb, U+9bee-9bf3, U+9bf5, U+9bf7-9bfa, U+9bfd, U+9bff-9c00, U+9c02, U+9c04, U+9c06, U+9c08-9c0d, U+9c0f-9c16, U+9c18-9c1e, U+9c21-9c2a, U+9c2d-9c32, U+9c35-9c37, U+9c39-9c3a, U+9c3d;
}
/* [8] */
#font-face {
font-family: 'Train One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/trainone/v13/gyB-hwkiNtc6KnxUVjWHP87JR5-7NdB589yspgpx0N7r5-25NB8.8.woff2) format('woff2');
unicode-range: U+98eb, U+98ed-98ee, U+98f0-98f1, U+98f3, U+98f6, U+9902, U+9907-9909, U+9911-9912, U+9914-9918, U+991a-9922, U+9924, U+9926-9927, U+992b-992c, U+992e, U+9931-9935, U+9939-993e, U+9940-9942, U+9945-9949, U+994b-994e, U+9950-9952, U+9954-9955, U+9958-9959, U+995b-995c, U+995e-9960, U+9963, U+9997-9998, U+999b, U+999d-999f, U+99a3, U+99a5-99a6, U+99a8, U+99ad-99ae, U+99b0-99b2, U+99b5, U+99b9-99ba, U+99bc-99bd, U+99bf, U+99c1, U+99c3, U+99c8-99c9, U+99d1, U+99d3-99d5, U+99d8-99df, U+99e1-99e2, U+99e7, U+99ea-99ee, U+99f0-99f2, U+99f4-99f5, U+99f8-99f9, U+99fb-99fe, U+9a01-9a05, U+9a08, U+9a0a-9a0c, U+9a0f-9a11, U+9a16, U+9a1a, U+9a1e, U+9a20, U+9a22-9a24, U+9a27, U+9a2b, U+9a2d-9a2e, U+9a31, U+9a33, U+9a35-9a38, U+9a3e, U+9a40-9a45, U+9a47, U+9a4a-9a4e, U+9a51-9a52, U+9a54-9a58, U+9a5b, U+9a5d, U+9a5f, U+9a62, U+9a64-9a65, U+9a69-9a6c, U+9aaa, U+9aac-9ab0, U+9ab2, U+9ab4-9ab7, U+9ab9, U+9abb-9ac1, U+9ac3, U+9ac6, U+9ac8, U+9ace-9ad3, U+9ad5-9ad7, U+9adb-9adc, U+9ade-9ae0, U+9ae2-9ae4;
}
/* [9] */
#font-face {
font-family: 'Train One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/trainone/v13/gyB-hwkiNtc6KnxUVjWHP87JR5-7NdB589yspgpx0N7r5-25NB8.9.woff2) format('woff2');
unicode-range: U+971d, U+9721-9724, U+9728, U+972a, U+9730-9731, U+9733, U+9736, U+9738-9739, U+973b, U+973d-973e, U+9741-9744, U+9746-974a, U+974d-974f, U+9751, U+9755, U+9757-9758, U+975a-975c, U+9760-9761, U+9763-9764, U+9766-9768, U+976a-976b, U+976e, U+9771, U+9773, U+9776-977d, U+977f-9781, U+9785-9786, U+9789, U+978b, U+978f-9790, U+9795-9797, U+9799-979a, U+979c, U+979e-97a0, U+97a2-97a3, U+97a6, U+97a8, U+97ab-97ac, U+97ae, U+97b1-97b6, U+97b8-97ba, U+97bc, U+97be-97bf, U+97c1, U+97c3-97ce, U+97d0-97d1, U+97d4, U+97d7-97d9, U+97db-97de, U+97e0-97e1, U+97e4, U+97e6, U+97ed-97ef, U+97f1-97f2, U+97f4-97f8, U+97fa, U+9804, U+9807, U+980a, U+980c-980f, U+9814, U+9816-9817, U+9819-981a, U+981c, U+981e, U+9820-9821, U+9823-9826, U+982b, U+982e-9830, U+9832-9835, U+9837, U+9839, U+983d-983e, U+9844, U+9846-9847, U+984a-984b, U+984f, U+9851-9853, U+9856-9857, U+9859-985b, U+9862-9863, U+9865-9866, U+986a-986c, U+986f-9871, U+9873-9875, U+98aa-98ab, U+98ad-98ae, U+98b0-98b1, U+98b4, U+98b6-98b8, U+98ba-98bc, U+98bf, U+98c2-98c8, U+98cb-98cc, U+98ce, U+98dc, U+98de, U+98e0-98e1, U+98e3, U+98e5-98e7, U+98e9-98ea;
}
/* The list goes on to [117] ... */
Roboto has unicode-ranges with the subset's name commented above each #font-face statement, while Train One seems to have ever expanding unicode-ranges with numbers commented above each #font-face statement. The list goes on till 117, btw.
The reason why I'm curious, is because it seems to load three font files, just to display Latin characters.
Is this just a very inefficiently built stylesheet, or is there a specific reason why the stylesheet is built this way?
BTW. if it isn't clear, this is a question specifically regarding the Google Fonts API and the way it generates stylesheets. I understand what unicode-ranges are used for. I just don't understand what the Google Fonts API is trying to achieve with such a large amount of #font-face statements and unicode-ranges.
I have the following CSS - how would I describe it in SASS? I've tried reverse compiling it with css2sass, and just keep getting errors.... is it my CSS (which works ;-) )?
#font-face {
font-family: 'bingo';
src: url("bingo.eot");
src: local('bingo'),
url("bingo.svg#bingo") format('svg'),
url("bingo.otf") format('opentype');
}
In case anyone was wondering - it was probably my css...
#font-face
font-family: "bingo"
src: url('bingo.eot')
src: local('bingo')
src: url('bingo.svg#bingo') format('svg')
src: url('bingo.otf') format('opentype')
will render as
#font-face {
font-family: "bingo";
src: url('bingo.eot');
src: local('bingo');
src: url('bingo.svg#bingo') format('svg');
src: url('bingo.otf') format('opentype'); }
which seems to be close enough... just need to check the SVG rendering
I’ve been struggling with this for a while now. Dycey’s solution is correct in that specifying the src multiple times outputs the same thing in your css file. However, this seems to break in OSX Firefox 23 (probably other versions too, but I don’t have time to test).
The cross-browser #font-face solution from Font Squirrel looks like this:
#font-face {
font-family: 'fontname';
src: url('fontname.eot');
src: url('fontname.eot?#iefix') format('embedded-opentype'),
url('fontname.woff') format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#fontname') format('svg');
font-weight: normal;
font-style: normal;
}
To produce the src property with the comma-separated values, you need to write all of the values on one line, since line-breaks are not supported in Sass. To produce the above declaration, you would write the following Sass:
#font-face
font-family: 'fontname'
src: url('fontname.eot')
src: url('fontname.eot?#iefix') format('embedded-opentype'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg')
font-weight: normal
font-style: normal
I think it seems silly to write out the path a bunch of times, and I don’t like overly long lines in my code, so I worked around it by writing this mixin:
=font-face($family, $path, $svg, $weight: normal, $style: normal)
#font-face
font-family: $family
src: url('#{$path}.eot')
src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$svg}') format('svg')
font-weight: $weight
font-style: $style
Usage: For example, I can use the previous mixin to setup up the Frutiger Light font like this:
+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')
For those looking for an SCSS mixin instead, including woff2, SASS list.append is useful for conditionally adding source files/formats:
#mixin fface(
$path,
$family,
$type: "",
$weight: 400,
$style: normal,
$local1: null,
$local2: null,
$ttf: null,
$otf: null,
$eot: null,
$svg: null
) {
$src: null; // initialize an empty source path
// only load local files when both sources are present
#if $local1 and $local2 {
$src: append($src, local("#{$local1}"), comma);
$src: append($src, local("#{$local2}"), comma);
}
#if $otf {
$src: append($src, url("#{$path}#{$type}.otf") format("opentype"), comma);
}
// load default formats (woff and woff2)
$src: append($src, url("#{$path}#{$type}.woff2") format("woff2"), comma);
$src: append($src, url("#{$path}#{$type}.woff") format("woff"), comma);
// formats that should only be added at the end
#if $ttf {
$src: append($src, url("#{$path}#{$type}.ttf") format("truetype"), comma);
}
#if $svg {
$src: append($src, url("#{$path}#{$type}.svg##{$svg}") format("svg"), comma);
}
// the actual FONT FACE DECLARATION
#font-face {
font-family: $family;
// for compatibility reasons EOT comes first and is not appended
#if $eot {
src: url("#{$path}#{$type}.eot");
}
// load appended sources path
src: $src;
font-weight: $weight;
font-style: $style;
}
}
// USAGE
$dir: "assets/fonts/";
// declare family name
$familyName: "MyFont";
#include fface(
"#{$dir}#{$familyName}", $familyName, "-regular", 400, "normal",
"#{$familyName} Regular", "#{$familyName}-Regular", "ttf", "otf"
);
#include fface(
"#{$dir}#{$familyName}", $familyName, "-medium", 500, "normal",
"#{$familyName} Medium", "#{$familyName}-Medium", "ttf", "otf"
);
#include fface(
"#{$dir}#{$familyName}", $familyName, "-semibold", 600, "normal",
"#{$familyName} SemiBold", "#{$familyName}-SemiBold", "ttf", "otf"
);
// Material Icons
$familyName: "Material Icons"; // override previous value
$familyFileName: "MaterialIcons";
#include fface(
"#{$dir}#{$familyFileName}", $familyName, "-regular", 400, "normal",
$familyName, "#{$familyFileName}-Regular", "ttf", null, "eot"
);
#include fface(
"#{$dir}#{$familyFileName}", "#{$familyName} Outline", "-outline", 400, "normal",
"#{$familyName} Outline", "#{$familyFileName}-Outline", null, "otf", "eot"
);
.material-icons {
font-family: $familyName;
}
.material-icons-outline {
font-family: "#{$familyName} Outline";
}
The $type parameter is used for locating different files within a $family.
If you get a can't resolve error, remember to double check your fonts directory ($dir).
In my case I use SASS Mixin:
#mixin font-face($family, $file, $path, $svg, $weight: normal, $style: normal)
#font-face
font-family: $family
src: url($path + $file + '.eot')
src: url($path + $file + '.eot?#iefix') format('embedded-opentype'), url($path + $file + '.woff') format('woff'), url($path + $file + '.ttf') format('truetype'), url($path + $file + '.svg##{$svg}') format('svg')
font-weight: $weight
font-style: $style
Usage:
#include font-face('altivo', 'altivo-regular', '', 'altivo-regular')
#include font-face('altivo', 'altivo-medium', '', 'altivo-medium', 500, normal)
#include font-face('altivo', 'altivo-bold', '', 'altivo-bold', 700, normal)
#include font-face('corsa', 'corsa-grotesk-regular', '', 'corsa-grotesk-regular')
#include font-face('corsa', 'corsa-grotesk-medium', '', 'corsa-grotesk-medium', 500, normal)
#include font-face('corsa', 'corsa-grotesk-bold', '', 'corsa-grotesk-bold', 700, normal)
#include font-face('corsa', 'corsa-grotesk-xbold', '', 'corsa-grotesk-xbold', 800, normal)
Result:
#font-face {
font-family: "altivo";
src: url("altivo-regular.eot");
src: url("altivo-regular.eot?#iefix") format("embedded-opentype"), url("altivo-regular.woff") format("woff"), url("altivo-regular.ttf") format("truetype"), url("altivo-regular.svg#altivo-regular") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "altivo";
src: url("altivo-medium.eot");
src: url("altivo-medium.eot?#iefix") format("embedded-opentype"), url("altivo-medium.woff") format("woff"), url("altivo-medium.ttf") format("truetype"), url("altivo-medium.svg#altivo-medium") format("svg");
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: "altivo";
src: url("altivo-bold.eot");
src: url("altivo-bold.eot?#iefix") format("embedded-opentype"), url("altivo-bold.woff") format("woff"), url("altivo-bold.ttf") format("truetype"), url("altivo-bold.svg#altivo-bold") format("svg");
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: "corsa";
src: url("corsa-grotesk-regular.eot");
src: url("corsa-grotesk-regular.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-regular.woff") format("woff"), url("corsa-grotesk-regular.ttf") format("truetype"), url("corsa-grotesk-regular.svg#corsa-grotesk-regular") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "corsa";
src: url("corsa-grotesk-medium.eot");
src: url("corsa-grotesk-medium.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-medium.woff") format("woff"), url("corsa-grotesk-medium.ttf") format("truetype"), url("corsa-grotesk-medium.svg#corsa-grotesk-medium") format("svg");
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: "corsa";
src: url("corsa-grotesk-bold.eot");
src: url("corsa-grotesk-bold.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-bold.woff") format("woff"), url("corsa-grotesk-bold.ttf") format("truetype"), url("corsa-grotesk-bold.svg#corsa-grotesk-bold") format("svg");
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: "corsa";
src: url("corsa-grotesk-xbold.eot");
src: url("corsa-grotesk-xbold.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-xbold.woff") format("woff"), url("corsa-grotesk-xbold.ttf") format("truetype"), url("corsa-grotesk-xbold.svg#corsa-grotesk-xbold") format("svg");
font-weight: 800;
font-style: normal;
}