csswebfonts

How to add a custom font in CSS?

I was wondering if, anyone out there could help me figure out how to add a local font from my PC (WIN 10) to my local HTML website. Here is what I have tried so far.

@font-face {
    font-family: bubble;
    src: local(fonts/bubble.otf);
}

Here I want to take the font from my folder called "fonts" which is located inside my website's folder and then choose bubble.otf, but it does not work

body {
    margin:0;
    font-family: bubble;
}

enter image description here

Solution

  • If the font is in your websites folder, you should consider it to be not a local font. It's not a locally installed font but a part of your website, even though the website is on your computer.

    So I think you misunderstood the meaning of local, and you should load the font as if it is a normal web font, using url instead of local.