Custom Font doesn't work
Hi, I have a problem with a custom font, Bad Signal. I changed its extention from .otf to .woff and woff2 using this website https://transfonter.org/ . I imported the new fonts in all html pages and in the css file and I uploaded the font files along with everything else in the File Manager folder from CPanel. I can't see the custom font when I visit the website from my phone. I only see it when I visit the site from my laptop. Here is my code and thank you very much for your help:
HTML links
<link rel="stylesheet" href="styles.css">
<link rel="preload" href="BadSignal.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="BadSignal.woff" as="font" type="font/woff" crossorigin>
CSS code
@font-face {
font-family: 'Bad Signal';
src: url('BadSignal.woff2') format('woff2'),
url('BadSignal.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face { font-family: 'Bad Signal'; src: url('BadSignal.woff2') format('woff2'), url('BadSignal.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } :root { /* FONTS */ --FF: "Nunito", sans-serif; --FF-HEADINGS: "Bad Signal","Jersey", sans-serif; --FS: clamp(1.5rem, 2.5vh, 2rem); --FS-XL: 6rem; --FS-600: 1.5rem; --FS-500: 1.25rem; --FS-400: clamp(0.8rem, 1.5vh, 1.125rem); }
@font-face { font-family: 'Bad Signal'; src: url('BadSignal.woff2') format('woff2'), url('BadSignal.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } :root { /* FONTS */ --FF: "Nunito", sans-serif; --FF-HEADINGS: "Bad Signal","Jersey", sans-serif; --FS: clamp(1.5rem, 2.5vh, 2rem); --FS-XL: 6rem; --FS-600: 1.5rem; --FS-500: 1.25rem; --FS-400: clamp(0.8rem, 1.5vh, 1.125rem); }
Transfonter
Online @font-face generator
17 Replies
If I had to guess, you have the wrong file path(url).
Reason you see it on PC it's you have it installed locally.
Can you please tell me where I should look for the correct url? I copied it from the font file. Thank you for your response
Point it to where you saved it
https://www.w3schools.com/html/html_filepaths.asp
Thank you
The font is in the same folder as the files, I uploaded the files again and it still won't work. Please give me more suggestions
can you see the font being loaded in the devtools network tab?
menu.html:1 The resource file:///D:/clatite/second_repo-main/second_repo-main/clatite/BadSignal.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate
as value and it is preloaded intentionally. This is what I see in devtools
Thank you so much for your help
I don't understand where I should write the as valuejust to test, can you comment out the preload (css @font should be enough)
.h1, .menu__h1 {
font-family: 'Bad Signal';
font-weight: normal;
font-style: normal;
}
@font-face { font-family: 'Bad Signal'; src: url('BadSignal.woff2') format('woff2'), url('BadSignal.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } <link rel="preload" href="BadSignal.woff2" as="font" type="font/woff2" crossorigin>
@font-face { font-family: 'Bad Signal'; src: url('BadSignal.woff2') format('woff2'), url('BadSignal.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } <link rel="preload" href="BadSignal.woff2" as="font" type="font/woff2" crossorigin>
i mean, remove the preloading from the html, and see what happens
ok, I try this now
Failed to decode downloaded font: file:///D:/clatite/second_repo-main/second_repo-main/clatite/BadSignal.woff ; now I get this error
maybe try another webfont creator
https://www.fontsquirrel.com/tools/webfont-generator
Create Your Own @font-face Kits » Font Squirrel
Create Your Own @font-face Kits by uploading the fonts you want to use.
I tried it and it didn't work, I guess I'll give it another try, thanks a lot
I am a bit confused. Why using both
<link> and @font-face to load the fonts?it didn't work with @font-face so I put the link as well
Hi mate. You can also try with another font or maybe you've missed the font-family asignment to body/html tag? Do you only have that css defined? @Viviana
I've tried the Ubuntu font example btw from here: https://transfonter.org/examples and it works even in local environment without a node/apache server.
I have a google font that works, but the customer wants that specific one because it resembles his logo. I'm glad the code is correct so I think the problem is I imported the font twice and I fix the problem now. Thank you for your help
👏 👏