Hello,
i’m trying to use a custom font in my unbounce page but i have some problems with the CSS. It’s the first time i worked with CSS so probably there is something wrong in my stylesheets.
The font i’m using is already uploaded on my wordpress site so i’m trying to use as URL for the font the wordpress one.
This is the first stylesheet
/**
* Do not remove this section; it allows our team to troubleshoot and track feature adoption.
* TS:0001-07-008
*/
@font-face {
font-family: 'Sofia Pro';
src: url('https://yspot.co/wp-content/themes/y/assets/fonts/SofiaProRegular.woff2') format('woff2'),
url('https://yspot.co/wp-content/themes/y/assets/fonts/SofiaProRegular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Sofia Pro Semi';
src: url('https://yspot.co/wp-content/themes/y/assets/fonts/SofiaProSemiBold.woff2') format('woff2'),
url('https://yspot.co/wp-content/themes/y/assets/fonts/SofiaProSemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Sofia Pro';
src: url('https://yspot.co/wp-content/themes/y/assets/fonts/SofiaProRegular-Italic.woff2') format('woff2'),
url('https://yspot.co/wp-content/themes/y/assets/fonts/SofiaProRegular-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Sofia Pro';
src: url('https://yspot.co/wp-content/themes/y/assets/fonts/SofiaProBold.woff2') format('woff2'),
url('https://yspot.co/wp-content/themes/y/assets/fonts/SofiaProBold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Sofia Pro';
src: url('https://yspot.co/wp-content/themes/y/assets/fonts/SofiaProMedium.woff2') format('woff2'),
url('https://yspot.co/wp-content/themes/y/assets/fonts/SofiaProMedium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
The second stylesheet is about the different classes:
style>
/**
* Do not remove this section; it allows our team to troubleshoot and track feature adoption.
* TS:0001-07-008
*/
h1, h1 *{
font-family: ‘Sofia Pro’ !important;
font-weight: normal !important;
font-style: normal !important;
}
h2, h2 *{
font-family: ‘Sofia Pro’ !important;
font-weight: bold !important;
font-style: normal !important;
}
p, p *{
font-family: ‘Sofia Pro’ !important;
font-weight: normal !important;
font-style: normal !important;
}
button, button * {
font-family: ‘Sofia Pro’ !important;
font-weight: bold !important;
font-style: normal !important;
}
- {
font-family: ‘Sofia Pro’ !important;
font-weight: normal !important;
font-style: italic !important;
}
The problem here is that in the preview mode from my PC i saw it fine, but when i try to see the preview on another computer it doesn’t work.
Can anyone come help me?
Thank you very much!!