Html Question posted in
Some basic documentation can be found here.

Html – CSS – how to load a custom local font on OSX

I have a local webserver, and I would like to load a local custom font that is not on my project folder

I have checked some tutorials, but for a reason I do not know, I do not manage to load the custom font

Here is what I have done so far

<!DOCTYPE html>
<head>
<title>Font test</title>
</head>
<style>

@font-face
{
font-family: 'TestFont';
src: local('/Users/gomu/Font/testBold.otf');
}

.fontTest
{
font-family: "TestFont";
}
</style>
<body>

<span class="fontTest">Font no jutsu!</span>

</body>
</html>

I have also tried other solutions like

src: local('file:/Users/gomu/Font/testBold.otf');

src: url('file:/Users/gomu/Font/testBold.otf');

But it does not work

I have also disabled the local file restrictions on Safari, but it still does not work.

What I am missing there?

I am currently working on MAC OS Sonoma and can use Safari and Chrome

For your information, "testBold.otf" works if it hosted on a server, but here my goal is to load it locally from my computer

Otherwise, maybe I need to put in the system font folder? (is there something specific to do about that)

Thank you in advance

Tags:

2

Answers


  1. 0

    Make sure your "testbold.otf" file is in a directory within your webserver’s root.

    /your webserver root/
 /fonts/
  testbold.otf
 /your project/
  index.html
  .
  .
  .
  other files

    After this update the CSS using the updated source url.

    Login or Signup to reply.
  2. 0

    I hope I understood correctly.
    Since you mentioned that the fonts were not saved anywhere in the project, I used an external font. However, you could create a folder in your project and place the fonts inside it, allowing you to access them by referencing those fonts, which is a better solution.
    In any case, there are three methods for foreign fonts, and I used Google Fonts.
    All methods have been written and commented on so that you can study them more easily.
    1- import
    2- font-face
    3- link

    <!DOCTYPE html>

<head>
  <title>Font test</title>

  <!-- The third method: link 
  The third method is to use their links. I got it from Google Fonts. It definitely has to be in the head element.
  -->

 <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">

</head>
<style>
  /* The first method: import */

  /* @import url('https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap'); */


  /* The second method: font-face */

  /* @font-face {
    font-family: 'TestFont';
    src: url('https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap');
    
  } 
  */

  .fontTest {
    font-family: "Oswald", sans-serif;
    font-size: 30px;
  }
</style>

<body>

  <span class="fontTest">Font no juts!</span>

</body>

</html>

    You can also refer to the link above for more information on the mentioned topics:

    enter link description here

    I also added a folder named Fonts to my project and placed my downloaded fonts inside it and referenced them:

    <!DOCTYPE html>

<head>
  <title>Font test</title>

</head>
<style>
  @font-face {
    font-family: 'TestFont';
    src: url('./font/Digi Sarvenaz.ttf');

  }


  .fontTest {
    font-family: "TestFont";
    font-size: 30px;
  }
</style>

<body>

  <span class="fontTest">Font no jutsu!</span>

</body>

</html>

    I hope you have received my response.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search