Can't seem to change font type

Question

I have a couple of custom fonts in .otf files:

My index.html file looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="css/style.css" >
</head>
<body>
    <h3 style = "font-family: customBold;">Hello</h3>
    <h3 style = "font-family: customLight;">Hello</h3>
    <h3 style = "font-family: customRegular;">Hello</h3>
    <h3 style = "font-family: customThin;">Hello</h3>
</body>
</html>

My style.css looks like this

@font-face {
    font-family: customBold;
    src: url(fonts/Custom-Bold.otf);
}

@font-face {
    font-family: customLight;
    src: url(fonts/Custom-Light.otf);
}

@font-face {
    font-family: customRegular;
    src: url(fonts/Custom-Regular.otf);
}

@font-face {
    font-family: customThin;
    src: url(fonts/Custom-Thin.otf);
}

However, the font does not change for the h3's.

I followed this:

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

have you put all the font files inside the folder *css/fonts* ? — Blip, Sep 07 '15 at 12:37
If you are using a debugger for your browser you will se any errors/missing files etcetera. Great tip for a developer. — jtheman, Sep 07 '15 at 12:38
the index.html and style.css are in the main project directory. There is another directory within that called "fonts" which contains the .otf files? — KeyboardNinja, Sep 07 '15 at 13:13

score 1 · Answer 1 · edited May 23 '17 at 12:29

Try to use all the types, like .otf, .eot, .ttf etc. Add this types to your css file.

Few of the types are not supported in different browsers. Look into http://caniuse.com/#feat=ttf

Look into the below code how we can add all the formats required to work on different browsers. Reference from https://css-tricks.com/snippets/css/using-font-face/

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

Also refer this link for more information (similar problems), Using .otf fonts on web browsers

Can't seem to change font type

1 Answers1