@fontface not displaying consistently across browsers

[thatcreativeguy]

Hey,
I installed a custom font using the @fontface and it shows in some browsers, depending on if you are looking at it on a laptop or desktop. For example, the font will display on desktop, in Firefox and Chrome, but won’t display on Firefox and Chrome on my laptop or at work on my MAC desktop. However, the font will display on my iPad and iPhone in each browser. I have the font uploaded as a woff and I also uploaded it to the font setup, even though it won’t display, if you select it.

I have screenshots attached. The desktop screenshot is the font I want to make sure displays across all browsers, no matter what medium you are looking at the website on. The laptop screenshot is when the font DOES NOT display correctly. Can you guys help with this or give a solution on what to do?

[ruenel]

Hello @thatcreativeguy,

Thanks for reaching out.

I have found out that you added this custom CSS:

@font-face {
font-family: "WatermelonILTD-Regular";
font-style: normal;
font-weight: normal;
src: local("WatermelonILTD-Regular"), url("https://bigmanwatermelons.thatcreativeguy.com/WatermelonILTD-Regular.woff") format("woff");
}

.x-accordion-heading .x-accordion-toggle {
	color: #cc1d69;
	font-size: 18px;
	padding: 11px 11px;
  font-family: "Memphis LT CYR W01 Medium";
}

You are using the font-family name incorrectly. Based on the code above, you should be using this correct code:

@font-face {
   font-family: "Memphis LT CYR W01 Medium";
   font-style: normal;
   font-weight: normal;
   src: local("WatermelonILTD-Regular"), url("https://bigmanwatermelons.thatcreativeguy.com/WatermelonILTD-Regular.woff") format("woff");
}

.x-accordion-heading .x-accordion-toggle {
	color: #cc1d69;
	font-size: 18px;
	padding: 11px 11px;
  font-family: "Memphis LT CYR W01 Medium";
}

Kindly let us know how it goes.