self-hosting font won't work
I've been trying to apply Roboto Black as self-hosted font (@font-face) downloaded from Google Fonts in all three formats - .ttf, .woff2, and .woff but it is displaying nothing like Roboto Black on Google Fonts and as compared to importing it with @import tag.
I have been trying to debug but I've run out of options. Actually, I even checked the woff2 files as they come with HTML/CSS samples - and they look nothing like Roboto Black on Google fonts. That's why I tried .ttf, which is on screenshot - yet it too does not look as it has to be.
Is it possible that downloads from Google Fonts are originally of worse quality than @import fonts from the same Google Fonts? Because that is the only conclusion I came to.
#front-end
75 Replies
@Inna Bulatova may I ask, why download fonts instead off using the embed code? or import? Am just curious
so google won't track your users 🙂
is the path correct??
any errors in console?
is font file being listed in the network tab when you load the page ?
Impossible to know without seeing your file structure, but also, why are you renaming the font to 'main'?
Is the other text on the page also roboto? Are you able to import the other font files?
not just that, but google fonts breaks the gdpr, which means that a website won't be compliant in eu
have you tried setting the path to start with
/?Have you check in the browser what the rendered font say?
At least in chrome you should see exactly the font that get's rendered there.
It's under the computed tab.
What do you see under the network tab. Will the fonts be downloaded there?
It seems to be better for performance reasons, I've watched it in the video of Kevin Powell (here it is https://www.youtube.com/watch?v=zK-yy6C2Nck&t=411s) and I also saw it as a requirement on commercial projects
Kevin Powell
YouTube
Self-hosting fonts explained (including Google fonts) // @font-face...
Google fonts are great, but often self-hosting them is a better choice, or if you’re in parts of Europe, it might be your only choice, so in this video I take a look at the basics of how to self-host fonts.
🔗 Links
✅ Font Squirrel Webfont Generator: https://www.fontsquirrel.com/tools/webfont-generator
⌚ Timestamps
00:00 - Introduction
01:05 -...
it is listed, and font-family is listed in the computed styles
it was suggested in the video for debugging purposes so that Google Chrome or computer might have Roboto preinstalled and it would use it instead of the one in the project
that doesn't mean anything
thank you! I found it, and it seems somehow that it renders everything in Times New Roman, even though it is not specified anywhere
that is css file not a font file
that's because the font wasn't loaded
did you try what i said?
and it does not show up in the font tab
404 doesn't show there: it shows in "doc"
did that - didn't work
and 404 is what happens when it can't find the font
that's not what i said
i said
/console is clean
did only / - still no change
then show us the file structure
what you directory structure looks like
you can use vscode for it
it works for the button - the 700 setup - all correct
the assets too
🤔
the other folder is just all the files with css, html samples and stuff.
just kept it for references and checking
seems like the ttf is the issue for some reason
let me see
how are you using the font?
it is just when I checked out the Roboto Black (which must be 900) in the samples - it was still 400
I apply it (Roboto Black) only to the h1 as in the code above. For button it is a different file - Roboto Bold. and for the text <p> - Roboto Regular
can you show the code?
button works, paragraph works, heading doesn't
sent
no, thanks
im not downloading a zip
so how do you want me to show code?
you can send the html, css and font file
as a file or paste as code?
just drag-drop the files
it would be better if you could send in a codepen or something
but fonts and stuff is a pain there
but you'll need to put it into assets folder or change the path
it's not even trying to load the font
I see that it loads only font files for Roboto Bold and Roboto Regular, and doesn't load the Roboto Black, and heading is Roboto Bold instead of Black, but I have no idea why it is not loading, I've given it three options already
and I tried renaming it to 'Roboto' instead of 'main' - nothing has changed, it still renders as Roboto-Bold and not Roboto-Black
I FOUND IT
src: url('./Roboto-Black.ttf') format('truetype');
you have ttf
it's truetypeI changed it - didn't help - It still is Roboto Bold
it works if you fix the path to have
./Can you show your screenshot?
you have
/Because I fixed everything
but check the rendered font
this one
the bottom rendered fonts - does it say Roboto Black?
it is roboto black
the url is wrong. it is
./assets/...i threw everything into a folder because im lazy
just fix the path and it will work
I did... it still doesn't
you have to separate the paths with commas
url(...) format(...), url(...) format(...)
you have it separated by newlinesit worked!!!
I reselected the file by deleting the path and using the pop-up hints, and then it worked
so, the problems were:
- i was wrong about the path
- the format is wrong - it isn't
ttf but truetype
- you had everything smushed together - the font declarations have to be separated by commas
and now, i will throw a wrench: roboto has a variable font version, which has 100-900 font-weight in a single fileyes, you are right. I also forgot (or didn't know) about the commas
I tried it with woff2 and it worked too
I haven't gotten to this topic yet, thank you for this, I will be sure to check it out
you should check it
thank you for your help! this was driving me crazy
you just need to declare the font once and you save a lot of bandwidth
you're welcome
dont forget to mark as solved
how do I do that? it's my first issue
it's just a tag in the post
by the way, just so you know, the variable version is roboto flex