CODEWITHSUNDEEP
css
Brandon Powell
Brandon Powell

Reputation: 83

Fonts rendering Issues

I have a question about fonts rendering on websites. Following is an explanation of how to render my font in this blog post:

https://css-tricks.com/snippets/css/using-font-face/

Website Beta: https://perception.works/

Although I followed the blog post correctly, my font still isn't rendering correctly on the page. I want to know what is going wrong.

https://gyazo.com/baff88b5a8e1016c3507624c9d7ea31b?token=c94ee27bbcd6d958b7ade3712ec4d824

@font-face {
  font-family: 'zBold';
  src: url('assets/fonts/Zodiak-Black.eot'); /* IE9 Compat Modes */
  src: url('assets/fonts/Zodiak-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/Zodiak-Black.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/Zodiak-Black.woff') format('woff'), /* Pretty Modern Browsers */
       url('assets/fonts/Zodiak-Black.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}


h2 {
  font-size: 1.5vw;
  font-family: 'zBold', Fallback, sans-serif;
  margin-bottom: 19px;
  font-weight: bold;
}

p {
  font-size: 1vw;
  font-family: 'zBold', Fallback, sans-serif;
  line-height: 24px;
}

Upvotes: 0

Views: 139

Answers (1)

Amnah Razzaki
Amnah Razzaki

Reputation: 502

Your font files are not being loaded, make sure that you are providing the correct path for these files.(Zodiak-Black.woff2, Zodiak-Black.woff & Zodiak-Black.ttf).

Files not found

You can check the following links as well

  1. https://www.balbooa.com/knowledgebase/32-documentation-faq-joomla/176-how-to-add-custom-font-to-website-through-fontface
  2. https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website

Upvotes: 1

Related Questions