Hi there,
I’m a developer who uses Beaver Builder and Theme (and Themer) quite a bit. For a site I am building (it’s a development site at the moment) I have uploaded custom fonts to the proper folder in my child theme, and I used @fontface css styles to implement them on the site.
I know I’ve done it properly, because most of the font styles are displaying fine on my end. The only exceptions are the “Regular” and “Bold” weights. All I can think is that there is some pre-existing syntax in either beaver builder or the theme that is overriding these font weights.
Here is the site: https://tofino.boldfishy.com/
Here is the @fontface code I’ve used in the child theme CSS:
/* Tofino Brand Fonts */
@fontface {
font-family: “Tofino Black”;
src: url(fonts/tofino-black-webfont.woff), url(fonts/tofino-black-webfont.woff2), url(fonts/tofino-black-webfont.ttf), url(fonts/tofino-black-webfont.eot);
}
@fontface {
font-family: “Tofino Ultra”;
src: url(fonts/tofino-ultra-webfont.woff), url(fonts/tofino-ultra-webfont.woff2), url(fonts/tofino-ultra-webfont.ttf), url(fonts/tofino-ultra-webfont.eot);
}
@fontface {
font-family: “Tofino Bold”;
src: url(fonts/tofino-bold-webfont.woff), url(fonts/tofino-bold-webfont.woff2), url(fonts/tofino-bold-webfont.ttf), url(fonts/tofino-bold-webfont.eot);
}
@fontface {
font-family: “Tofino Semibold”;
src: url(fonts/tofino-semibold-webfont.woff), url(fonts/tofino-semibold-webfont.woff2), url(fonts/tofino-semibold-webfont.ttf), url(fonts/tofino-semibold-webfont.eot);
}
@fontface {
font-family: “Tofino Medium”;
src: url(fonts/tofino-medium-webfont.woff), url(fonts/tofino-medium-webfont.woff2), url(fonts/tofino-medium-webfont.ttf), url(fonts/tofino-medium-webfont.eot);
}
@fontface {
font-family: “Tofino Regular”;
src: url(fonts/tofino-regular-webfont.woff), url(fonts/tofino-regular-webfont.woff2), url(fonts/tofino-regular-webfont.ttf), url(fonts/tofino-regular-webfont.eot)!important;
}
@fontface {
font-family: “Tofino Book”;
src: url(fonts/tofino-book-webfont.woff), url(fonts/tofino-book-webfont.woff2), url(fonts/tofino-book-webfont.ttf), url(fonts/tofino-book-webfont.eot);
}
@fontface {
font-family: “Tofino Light”;
src: url(fonts/tofino-light-webfont.woff), url(fonts/tofino-light-webfont.woff2), url(fonts/tofino-light-webfont.ttf), url(fonts/tofino-light-webfont.eot);
}
@fontface {
font-family: “Tofino Thin”;
src: url(fonts/tofino-thin-webfont.woff), url(fonts/tofino-thin-webfont.woff2), url(fonts/tofino-thin-webfont.ttf), url(fonts/tofino-thin-webfont.eot);
}
/* Typography Styles */
body {
font-family: “Tofino Book”, Helvetica, sans-serif;
color: #676767;
font-size: 16px;
}
Attached is a screen shot of the custom fonts in action.
As I mentioned, it’s only the Regular and Bold weights that are not working. Please advise. Thank you.
