Hi, I’m working on the Website Design System challenge right now.
I can’t get the web fonts to display, just one that I happen to have installed on my system. I can’t figure out how to link them in correctly.
Here’s my code:
(If anyone is wondering: no, I don’t want to use Google fonts instead. They can be an actual GDPR violation in the EU that has been straight-up sued tons of times, so I’m starting to explore alternatives right away.)
The corresponding Cdcm lessons give the method with HTML and the @font-face method with CSS as alternatives, i.e. in my understanding you shouldn’t have both:
“Google Fonts provides free fonts that can be used in an HTML file with the tag or the @font-face property.”
(emphasis mine).
Is that correct? It’s either in HTML or@font-face in CSS - we don’t need both?
@font-face will only work with fonts local to the server - correct?
Is it necessary to have one for each of the font styles, e.g. one for DejaVu Sans regular, one for DejaVu Sans bold, one for DejaVu Sans italic,or should all the style be available through just the one link?
the several font families have a separate CSS-designation for each of the styles, e.g.
p {
font-family: 'DejaVuSansRegular';
}
p {
font-family: 'DejaVuSansBold';
}
p {
font-family: 'DejaVuSansOblique';
}
…and so on
Again - why is that the case, if I can use
p {
font-family: 'DejaVuSansRegular';
font-weight: bold;
}
instead of two different references?
most importantly, why won’t my imported web fonts display?
The main problem, it appears, is that the @font-face is not not working the way you think it is. I am not familiar with fontlibrary, but by the looks of it, it works the same as Google fonts.
In this case, you would have to @import just like Google Fonts does. It would look something like this:
If you wanted to use @font-face, you would have to download and host the fonts yourself, or use a remote URL that hosts the fonts on its server (which does not look possible from fontlibrary)
If you are using <link> @import or @font-face you only need to use one, that is correct.
As I stated above, @font-face can be hosted locally or through a remote URL that allows cross-origin resource sharing.
One file is regular and the other is bold. If you set your <body> font-family to “Font,” how could you ensure that the browser chooses the correct file?
You could name them separately or give them font-weights:
@font-face {
font-family: 'Font';
src: url('path/to/font-regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'Font';
src: url('path/to/font-bold.ttf') format('truetype');
font-weight: 700;
}
/*If setting font-weight you pick the correct file by doing this:
font-family: Font;
font-weight: 400 or 700; */
@font-face {
font-family: 'Font';
src: url('path/to/font-regular.ttf') format('truetype');
}
@font-face {
font-family: 'FontBold';
src: url('path/to/font-bold.ttf') format('truetype');
}
/* And in this case, because each is declared with its own font-family,
you use the respective font-family */
You are looking at the site’s @font-face rules. When you import or <link> that link, you have access to all of those styles which is why you can set DejaVuSansRegular to bold or italic.
A main issue you are having is with specificity. The * selector selects all elements. So, when you put this as your CSS:
Just setting font-family on .font2 will not work. You could create a utility class for the font-family and place that on all of your elements, or you could simply do something like this:
.font2 > * {
font-family: "DejaVuSansBook";
}
/* On a side-note, I also noticed you were not using the correct font-family names provided
by fontlibrary. You want to make sure you use the correct names so that the font
will load correctly as well. */
.font2 > * selects all of the direct children of .font2.
If you do this for each class, then your fonts will work:
.font1 > * {
font-family: "CantarellRegular";
}
/* Though not necessary because you have the default set to Cantarell. */
.font2 > * {
font-family: "DejaVuSansBook";
}
.font3 > * {
font-family: "LucymarSansRegular";
}
.font4 > * {
font-family: 'HackRegular';
}
/* Another side-note, I saw that font4 was using id="font4" instead of class="font4" if
you wanted to correct that */
In this sentence I meant to write “gives the <link> method with HTML”… Can’t edit it anymore (Discourse hides html tags unless they’re formatted as code).
But your solution to catch all with one selector .font3 > * is obviously more elegant.
However, if I assign any styling to the parent of some elements, I would normally expect the rule to be inherited by all its children automatically.
I chose to go the <link> and @import way, because it seems to be the one that Fontlibrary supports, and as you mentioned, the <link> used here gives me access to all the @font-face rules.
The CSS file there has no @import rules, so I don’t understand why it still works. Is it possible that importing Google fonts works in some kind of non-standard way that makes the @import unnecessary?
Or maybe is has something to do with these extra links in the header:
I don’t understand why you’d say here that it (using a remote URL that hosts the fonts on its server) is not possible from Fontlibrary: Isn’t this exactly what I’m doing here (and what you also did in your examples)?
The way I understand it now is:
both methods 1. <link> and @import, as well as 2. @font-faceallow for both use cases:
A. storing the fonts locally on the same server that serves my website and
B. linking to remote fonts remote that will be loaded from the remote server once the website is called.
Depending on the situation, that is typically the case. But when you use the * selector, it applies the style to each element individually. Because of this, the specificity on the parent is not higher than the direct application. This is why the
parent > * {
...
}
parent child {
...
}
Selectors work. They have higher specificity.
To be honest, I do not know how or why it works either, lol. Google Fonts is powered power their API, which perhaps is how it works for fontlibrary? I’d have to research how using import and works intrinsically, but it’s typically just magic that I accept openly.
Nope, not quite! The screenshot I used for the fonts working were due to the separate <link>s provided by fontlibrary. @font-face works with the file of the font directly. This is why in my example of @font-face
You see the file type in the src.
path/to/font-regular.ttf
Is the path to the font file on the site’s server. Like if you were accessing images, CSS, other HTML pages, etc. through your computer’s directory.
Is what the src would look like if using @font-face from a remote website. Notice that the Google fonts and fontlibrary urls do not include file types, just the same of the font-family.
If using @import, <link>, or @font-face from a remote URL they access the font from an external source (which you mentioned in B) which then gets stored in the browser’s cache (At least I believe so. Again, I have not looked into it too much) The only way the font is stored locally on the server (to my knowledge) is if the files themselves are in the directory of the server.
Why doesn’t it work though?