Solution 1 :

I am answering this again, because I feel like I must get to the bottom of this problem!

Here is a checklist on why your @font-face might not work.

You are using ttf files only

Some browsers support .ttf files. Some browsers support .otf files. Some browsers support .woff files. Some browsers support .woff2 files.

So you will need to specify multiple files. Like this:

@font-face {
    font-family: "font name";
    src: url("font.eot") format("embedded-opentype"),
        url("font.woff") format("woff"),
        url("font.woff2") format("woff2"),
        url("font.ttf") format("truetype");
}

If you do not have all these font files, you can convert them using a font converter of your choice. (do not forget, though, that you will need permission from the font owner to do this)

Here is a rough table for support for font types:

        ttf/otf    woff/woff2    eot 
-------------------------------------
Chrome     ●         ●
Firefox    ●         ●
IE         ○         ●          ●
Opera      ● 
Safari     ●

● = supported ○ = partial support

Also, you should put them in this order:

  • eot
  • woff/woff2
  • ttf/otf

Make sure your file formats are correct

So make sure that the .ttf files have a format of “truetype”, and .of files have a format of “otf” etc.

Also, make sure that the file extentions are correct, because that will stop it from working.

Make sure your syntax is correct

Check your syntax. Also you should put it through a validator to make sure everything’s perfect.

Make sure your file paths are correct

Of course, check your console to see if there are any 404 errors. If there are none, then they should be correct.

Also, I often have problems with file paths. They load, but they just don’t show up. I often solve this by:

  1. putting all the font files in the root directory (the same place you put your homepage)
  2. putting the @font-face in a new file called font.css in that same directory
  3. linking to this file using @import "font.css" in your main stylesheet

I’m not sure why, but it just seems to work…

TL;DR

  1. make sure you use different formats for full support
  2. make sure your formats are correct
  3. check your syntax with a validator
  4. check the file paths are correct

Problem :

I need some help with making @font-face load, I think I’m doing everything properly, I followed the directions in Font Squirrel as well. This is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MineplexStalkers</title>
    <link
            rel="icon"
            type="image/png"
            href="https://cdn.glitch.com/47ac82cf-e3bd-4de2-a01d-cce78a6c9980%2F243-2438639_mineplex-logo.png?v=1590274953985"
    />
    <body>
<h2 class="h2mine">
    Welcome to the MineplexStalkers official webpage. We bring to you live Mineplex statistics and game analytics.
</h2>

</body>
<style>

@font-face {
    font-family: 'minecraftmedium';
    src: url('9ff01213-7695-4cf6-8627-1a6f0fa2de18_9ff01213-7695-4cf6-8627-1a6f0fa2de18_minecraft_2-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
#h2{
text-align:left;
padding: 10px;
font-family:minecraftmedium;
}
</style>

Please help I’ve tried for a long time to get unstuck. IntellIJ full code.

Comments

Comment posted by Skocdopole

There is not much info so no one can help you in the current state. You have to describe what exactly doesn’t work.

Comment posted by Infui0ayaan

I added an image to it, hopefully that’ll add stuff.

Comment posted by Infui0ayaan

wow this is really nice, thanks for th is detailed description!

By

Leave a Reply

Your email address will not be published. Required fields are marked *