Custom Font Not Working

Support
#1

Hey there!

Not sure where I went wrong uploading a custom font, but it’s not rendering properly.

Details below.

#2

Font: Magallanes

Here’s the code from the style sheet:

@font-face {
	font-family: ‘Magallanes Black';
	src: url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-webfont.eot’),
	src: url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-webfont.eot?#iefix') format('embedded-opentype'),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-webfont.woff') format('woff'),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-webfont.woff2’) format(‘woff2’),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-webfont.svg#MagallanesCondBlack-webfont’) format(‘svg’);
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: ‘Magallanes Black Italic’;
	src: url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-italic-webfont.eot’),
	src: url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-italic-webfont.eot?#iefix') format('embedded-opentype'),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-italic-webfont.woff') format('woff'),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-italic-webfont.woff2’) format(‘woff2’),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-italic-webfont.svg#MagallanesCondBlack-italic-webfont’) format(‘svg’),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondBlack-italic-webfont.ttf’) format(‘truetype’);
	font-weight: 900;
	font-style: italic;
}

@font-face {
	font-family: ‘Magallanes Regular’;
	src: url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-webfont.eot’),
	src: url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-webfont.eot?#iefix') format('embedded-opentype'),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-webfont.woff') format('woff'),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-webfont.woff2’) format(‘woff2’),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-webfont.svg#MagallanesCondRegular-webfont’) format(‘svg’),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-webfont.ttf’) format(‘truetype’);
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: ‘Magallanes Italic’;
	src: url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-italic-webfont.eot’),
	src: url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-italic-webfont.eot?#iefix') format('embedded-opentype'),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-italic-webfont.woff') format('woff'),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-italic-webfont.woff2’) format(‘woff2’),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-italic-webfont.svg#MagallanesCondRegular-italic-webfont’) format(‘svg’),
		url('http://hpjm.org/wp-content/themes/pro-child/magallanes-font/MagallanesCondRegular-italic-webfont.ttf’) format(‘truetype’);
	font-weight: normal;
	font-style: italic;
}

Here’s the CSS in the theme:

body, p {
  font-family: ‘Magallanes Regular’;
  font-weight: normal;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
  font-family: 'Magallanes Black’;
  font-weight: 900;
  font-style: normal;
}
#3

Hey there,

Please change the pretty single quotes in your code with regular single quote and test again.

If you check your CSS at http://hpjm.org/wp-content/themes/pro-child/style.css, you’ll see that pretty quotes are not translated as regular quotes.

Please see the correct setup guide at https://css-tricks.com/snippets/css/using-font-face/.

Thanks.

#4

Sorry. It still isn’t working.

#5

Hi,

I went ahead and added the font-face code in your customizer.

Customizer CSS has a higher priority than your child theme’s style.css

It seems to work now.

Kindly check in your end,

Thanks

#6

This worked.

Thank you!

#7

You’re welcome.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.