Docs

[Neo Digital Media]

Hey guys

After reading through all related post on here, I finally managed to get the REGULAR version of my custom font to work across the site however, I can’t seem to get the BOLD version to work alongside it without affecting the REGULAR one.

Can one of you Themeco geniuses help me out with this issue. Here’s the CSS entry for the REGULAR version of my Custom Font:

@font-face {
font-family: Opificio_regular;
src: url(‘http://mywebsite.com/wp-content/themes/x-child/fonts/Opificio_regular.eot’);
src: url(‘http://mywebsite.com/wp-content/themes/x-child/fonts/Opificio_regular.eot?#iefix’) format(’embedded-opentype’),
url(‘http://mywebsite.com/wp-content/themes/x-child/fonts/Opificio_regular.woff’) format(‘woff’),
url(‘http://mywebsite.com/wp-content/themes/x-child/fonts/Opificio_regular.ttf’) format(‘truetype’),
url(‘http://mywebsite.com/wp-content/themes/x-child/fonts/Opificio_regular.svg#Opificio_regular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

.entry-title {
line-height: 1.4;
font-family : Opificio_regular !important;
}

h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle, .x-btn {
font-family: Opificio_regular !important;
}

.x-navbar .x-nav-wrap .x-nav > li > a {
font-style: normal;
font-family: Opificio_regular;
font-weight: 700;
text-transform: uppercase;
font-size: large;
}

.rtl.x-navbar-static-active .masthead-stacked .desktop .x-nav>li:not(.x-megamenu) .sub-menu, .rtl.x-navbar-fixed-top-active .masthead-stacked .desktop .x-nav>li:not(.x-megamenu) .sub-menu {
left: auto;
right: 0;
font-family: Opificio_regular !important;
font-size: large;
}

.x-brand {
font-family: Opificio_regular;
}

.h-custom-headline {
font-family: Opificio_regular !important;
}

.x-img-thumbnail {
visibility: hidden;
}

body {
font-family: Opificio_regular !important;
}

/* Footer */
.x-colophon {
font-family: Opificio_regular !important;
}

/* Main content */
.x-main {
font-family: Opificio_regular !important;
}

/* all links */
a {
font-family: Opificio_regular !important;
}

.x-topbar {
font-family: Opificio_regular !important;
}

.x-logobar {
font-family: Opificio_regular !important;
}

/* menu links */
.x-navbar ul li a{
font-family: Opificio_regular !important;
}

/* logo */
.x-brand {
font-family: Opificio_regular !important;
}

[Rupok]

Hi there,

Thanks for writing in! If you have the bold version for your font; you can add this as another instance to avoid conflict with the regular version. It will be like this :

@font-face {
font-family: Opificio_bold;
src: url(‘http://mywebsite.com/wp-content/themes/x-child/fonts/Opificio_bold.eot’);
src: url(‘http://mywebsite.com/wp-content/themes/x-child/fonts/Opificio_bold.eot?#iefix’) format(’embedded-opentype’),
url(‘http://mywebsite.com/wp-content/themes/x-child/fonts/Opificio_bold.woff’) format(‘woff’),
url(‘http://mywebsite.com/wp-content/themes/x-child/fonts/Opificio_bold.ttf’) format(‘truetype’),
url(‘http://mywebsite.com/wp-content/themes/x-child/fonts/Opificio_bold.svg#Opificio_bold’) format(‘svg’);
font-weight: bold;
font-style: normal;
}

Note : that’s just example. Make sure to upload your font and use the exact naming as you did for the regular one.

Cheers!

[Neo Digital Media]

Thank you for your quick response. Just one more question, would i have to change the font family name as well for the other BOLD elements as in the regular one?

e.g.

REGULAR CODE
.h-custom-headline {
font-family: Opificio_regular !important;
}

BOLD CODE
.h-custom-headline {
font-family: Opificio_bold !important;
}

so essentially would i end up with two code entries, one for regular and one for bold, because I tried that, and it did not work. I basically copied the same code and replaced ‘Opificio_regular’ with Opificio_bold in the NEW bold code but all the settings from the first code we undone and all text reverted to defaults.

I assume that somewhere in the code something is causing a conflict with the two font settings…

whats your take on this?

Thanks.

[Rupok]

Hi there,

Yes you need to declare the font-family separately for this. And make sure you have the bolder version for the font to upload.

Thanks!

[Author]

Posts