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);
}
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);
}
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
