FAQ: CSS Typography - Font-Face II

My browser won’t let me paste within my css stylesheet. Help!

Should I use both the <link> element and the @font-face method to import a non-user font?

One or the other, I should think. Load it in the HEAD before the style sheets, so there is no interference, is one consideration. If I’m no mistaken that is an asynchronous download so other files can come down at the same time. If it is loaded in the CSS, then it has to be at the top of the style sheet, and it is not asynchronous. The style sheet itself will not be parsed until that download is complete. No matter, really. We want the fonts to come in first, at any rate. I really cannot advise which way is better. Might be worthwhile to do a little comparative research as to the pros and cons of either approach.

1 Like

Hi, I’m having trouble copying the URL because after “https://etc.etc…”, the code reads everything after the two // as a comment and not code? Has anyone else had this problem and found a solution

It shouldn’t be a problem. // is not a comment in CSS and it would appear the LE syntax highlighter is reading it as one.

font-face

Thank you for all your help!

1 Like

My question is why would we want to import a font and not refer to Google fonts?

is this what it meant to look like ?
if not why am I still passing the entire font exercises when it looks like this ?

This post was flagged by the community and is temporarily hidden.

Anyone else noticing only one /* latin */ import on google?

Link: https://fonts.googleapis.com/css2?family=Space+Mono&display=swap

Once I copy into chrome I get this:

/* vietnamese /
@font-face {
font-family: ‘Space Mono’;
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(‘Space Mono’), local(‘SpaceMono-Regular’), url(https://fonts.gstatic.com/s/spacemono/v6/i7dPIFZifjKcF5UAWdDRYE58RWq7.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: ‘Space Mono’;
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(‘Space Mono’), local(‘SpaceMono-Regular’), url(https://fonts.gstatic.com/s/spacemono/v6/i7dPIFZifjKcF5UAWdDRYE98RWq7.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: ‘Space Mono’;
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(‘Space Mono’), local(‘SpaceMono-Regular’), url(https://fonts.gstatic.com/s/spacemono/v6/i7dPIFZifjKcF5UAWdDRYEF8RQ.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;
}

Which is causing error in exercise when I import only the “latin” section. (which does not provide the 700 only the 400)