CODEWITHSUNDEEP
csswebfonts
tsgsOFFICIAL
tsgsOFFICIAL

Reputation: 59

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

Upvotes: 0

Views: 142

Answers (2)

Wole Ademola
Wole Ademola

Reputation: 1

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.

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116110

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.

Upvotes: 1

Related Questions