Docs

[jessica]

Hi! Chrome and firefox on windows are not displaying fonts correctly. The 1st attached screenshot (chrome on mac) is how it should look. The second two (chrome on win and firefox on win) aren’t dispalying the fonts correctly. Please advise.

(See file names for specific browser and os combos)

[jessica]

This reply has been marked as private.

[Rupok]

Hi there,

Looks like you are using the font “superclarendon” which is working fine for all browsers. Kindly show us the difference or clarify if you have any other fonts.
Your screenshot was not uploaded due to exceeded file size. Your attachment should be within 512KB. You can also use this tool to add your screenshot – http://prnt.sc

Cheers!

[jessica]

Ok. It should look like this: http://prnt.sc/e3lvrf
Chrome on Windows looks like this: http://prnt.sc/e3lv1i
Firefox on Windows looks like this: http://prnt.sc/e3lx8l

[Rupok]

Hi there,

Thanks for clarifying. Now I can see you have added another font-family named “story” – http://prntscr.com/e3ok8a

So actually none of you font-family is working and the fallback font is being used by the browser hence it’s different. As you have added the font properly from Customize > Typography, make sure not to use any other font-family by CSS.

Cheers!

[jessica]

I need to use the story and superclarendon font. I used the “Use Any Font” plugin to install superclarendon and story. Then I called the fonts through classes.

[jessica]

I think I installed this correctly using font face instead of the “use any font” plugin. Can you verify?

[Rue Nel]

Hello There,

Thanks for updating in! It turns out that you have added the @font css incorrectly. Please update it and make use of this code instead:

@font-face {
  font-family: 'superclarendon';
  src: url('http://palapabalm.com/wp-content/themes/x-child/Fonts/superclarendon.eot');
  src: url('http://palapabalm.com/wp-content/themes/x-child/Fonts/superclarendon.eot?#iefix') format('embedded-opentype'),
       url('http://palapabalm.com/wp-content/themes/x-child/Fonts/superclarendon.woff') format('woff'),
       url('http://palapabalm.com/wp-content/themes/x-child/Fonts/superclarendon.ttf')  format('truetype'),
       url('http://palapabalm.com/wp-content/themes/x-child/Fonts/superclarendon.svg#svgsuperclarendon') format('svg');
}

@font-face {
  font-family: 'story';
  src: url('http://palapabalm.com/wp-content/themes/x-child/Fonts/story.eot');
  src: url('http://palapabalm.com/wp-content/themes/x-child/Fonts/story.eot?#iefix') format('embedded-opentype'),
       url('http://palapabalm.com/wp-content/themes/x-child/Fonts/story.woff') format('woff'),
       url('http://palapabalm.com/wp-content/themes/x-child/Fonts/story.ttf')  format('truetype'),
       url('http://palapabalm.com/wp-content/themes/x-child/Fonts/story.svg#svgstory') format('svg');
}

If you need anything else we can help you with, please let us know.

[Author]

Posts