Viviana
KPCKevin Powell - Community
•Created by Viviana on 6/4/2024 in #front-end
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); }
25 replies