-1

I already asked this question about how to add a custom font and I finally found a way so that the font is shown on my own Notebook.

What I found out today is, that this specific custom font (and maybe another font too, but it is a text-font so I don't see the difference) isn't active on a PC, at my school. (It's about this homepage, look at the title font, which should be Oz Handicraft; I also placed a image at the end, so you can see the font how it should look like).

This is how I embedded the font:

@font-face{
    font-family: Oz;
    src: url("fonts/ozHandicraft.otf");
    font-weight: normal;
}

@font-face{
    font-family: Liberation;
    src: url("fonts/liberation.ttf");
     font-weight: normal;
}

I already thought of some possible mistakes, but don't know how I could check of they are the actual mistake.

  • The font isn't actually embedded and the font can only be displayed on computers where the Oz Handicraft is installed
  • I had problems uploading the font to "font squirrel webkit" because it was blocked. Maybe the font is blocked on wordpress too and can only be displayed on computers where the font is installed

How can I check these mistakes if they are true, what can be other mistakes I made?

enter image description here

  • 2
    I don't have a solution for you - but I would recommend using fonts.google.com instead of hosting your own. It's the best approach for custom fonts on websites that'll work on the widest scope of browsers, with no licensing issues. – David Sword Jan 8 '18 at 21:13
  • The problem is different browsers support different font types. If your fonts are not available from Google, try the Font Squirrel Webfont Generator - fontsquirrel.com/tools/webfont-generator - you can upload your fonts, tell it which character sets to include, and it will give you the various files (and CSS) you need to make it work across most browsers. – WebElaine Jan 8 '18 at 21:18
  • You might need a .eot format – admcfajn Jan 9 '18 at 5:35
  • @WebElaine Font Squirrel doesn't work, as I already said. I couldn't find the font on google fonts either. I tested it with different browsers and it worked on both Chrome and Firefox. It seems to differ from device to device. – Féileacán Jan 9 '18 at 7:03
  • Different browsers use/and are compatible with different font formats. So having just one font format for each font may not be enough. – D. Dan Jan 9 '18 at 7:50
1

There is an error in your CSS Declarations on your page.

If you change the line 152 on your style.css from "font-family: Oz Handicraft;' (and anyplace else you're using it) to:

    h1 {
    font-family: Oz;
    }

since in your code, you have this.

@font-face{
    font-family: Oz;
    src: url("fonts/ozHandicraft.otf");
    font-weight: normal;
}

you declare it as such. If you make this change, it works fine on my screen, and I don't have this font installed on my desktop.

Other solution is to simply update your @font-face and put this instead:

 @font-face{
    font-family: Oz Handicraft;
    src: url("fonts/ozHandicraft.otf");
    font-weight: normal;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.