如何在CSS中添加自定义字体？

Question

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" wich is located inside my website's folder and then choose bubble.otf, but it does not work

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

Answer 1

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 .

Answer 2

If you want to call your fonts from your local directory, you have to call it using the "url" instead of local as you used. Below is a workable example of what you want to achieve.

@font-face {
font-family: Segoel;
src: url('../font/segoel.eot'); /* IE9 Compatibility Modes */
src: url('../font/segoel.eot?') format('eot'),  /* IE6-IE8 */
url('../font/segoel.woff') format('woff'), /* Modern Browsers */
url('../font/segoel.ttf')  format('truetype'), /* Safari, Android, iOS */
url('../font/segoel.svg#svgsegoel') format('svg'); /* Legacy iOS */  }

However, linking to online font repositories such as Google font , fontsquirrel directly are most effective ways especially when you want to use variety of fonts.