Why does using @import url(./assets/Roboto/roboto-font.css); not work?

My directory structure is

-app

-main.css

  -assets

     -Roboto

        -roboto-font.css

        -Roboto font files...

But when I use
@import url("./assets/Roboto/roboto-font.css");
in my main.css file but the font doesn't apply to any elements. This is the contents of roboto-font.css

@font-face {

    font-family: "Roboto";

    font-style: normal;

    font-weight: 100;

    src: url(./Roboto-Thin.ttf) format('tff');

}

edited Jan 20 at 7:12

asked Jan 19 at 18:24

Dextication

6828

Which folder is your main.css in?

– AndrewL64
Jan 19 at 18:33

Strong recommendation to not use ttf, it's was never meant for webfont use. Use woff2/woff and don't have anything else in there.

– Mike 'Pomax' Kamermans
Jan 19 at 19:29

@Mike'Pomax'Kamermans Should I rename the files to end in woff2/woff? Or just replace format with woff2/woff?

– Dextication
Jan 20 at 7:12

You should make sure you have the .woff2 and .woff files in your dir, and then point to those in your font-face src, following the rules for how to point to a file (using url()) and how to indicate the format (using format()). And on a sidenote, format("ttf") doesn't exist, so it's worth giving developer.mozilla.org/en-US/docs/Web/CSS/@font-face a read-through.

– Mike 'Pomax' Kamermans
Jan 20 at 17:19

add a comment |

My directory structure is

-app

-main.css

  -assets

     -Roboto

        -roboto-font.css

        -Roboto font files...

But when I use
@import url("./assets/Roboto/roboto-font.css");
in my main.css file but the font doesn't apply to any elements. This is the contents of roboto-font.css

@font-face {

    font-family: "Roboto";

    font-style: normal;

    font-weight: 100;

    src: url(./Roboto-Thin.ttf) format('tff');

}

edited Jan 20 at 7:12

asked Jan 19 at 18:24

Dextication

6828

Which folder is your main.css in?

– AndrewL64
Jan 19 at 18:33

Strong recommendation to not use ttf, it's was never meant for webfont use. Use woff2/woff and don't have anything else in there.

– Mike 'Pomax' Kamermans
Jan 19 at 19:29

@Mike'Pomax'Kamermans Should I rename the files to end in woff2/woff? Or just replace format with woff2/woff?

– Dextication
Jan 20 at 7:12

You should make sure you have the .woff2 and .woff files in your dir, and then point to those in your font-face src, following the rules for how to point to a file (using url()) and how to indicate the format (using format()). And on a sidenote, format("ttf") doesn't exist, so it's worth giving developer.mozilla.org/en-US/docs/Web/CSS/@font-face a read-through.

– Mike 'Pomax' Kamermans
Jan 20 at 17:19

add a comment |

My directory structure is

-app

-main.css

  -assets

     -Roboto

        -roboto-font.css

        -Roboto font files...

But when I use
@import url("./assets/Roboto/roboto-font.css");
in my main.css file but the font doesn't apply to any elements. This is the contents of roboto-font.css

@font-face {

    font-family: "Roboto";

    font-style: normal;

    font-weight: 100;

    src: url(./Roboto-Thin.ttf) format('tff');

}

edited Jan 20 at 7:12

asked Jan 19 at 18:24

Dextication

6828

My directory structure is

-app

-main.css

  -assets

     -Roboto

        -roboto-font.css

        -Roboto font files...

But when I use
@import url("./assets/Roboto/roboto-font.css");
in my main.css file but the font doesn't apply to any elements. This is the contents of roboto-font.css

@font-face {

    font-family: "Roboto";

    font-style: normal;

    font-weight: 100;

    src: url(./Roboto-Thin.ttf) format('tff');

}

css fonts

edited Jan 20 at 7:12

asked Jan 19 at 18:24

Dextication

6828

edited Jan 20 at 7:12

asked Jan 19 at 18:24

Dextication

6828

edited Jan 20 at 7:12

asked Jan 19 at 18:24

Dextication

6828

asked Jan 19 at 18:24

Dextication

6828

asked Jan 19 at 18:24

Dextication

6828

Which folder is your main.css in?

– AndrewL64
Jan 19 at 18:33

Strong recommendation to not use ttf, it's was never meant for webfont use. Use woff2/woff and don't have anything else in there.

– Mike 'Pomax' Kamermans
Jan 19 at 19:29

@Mike'Pomax'Kamermans Should I rename the files to end in woff2/woff? Or just replace format with woff2/woff?

– Dextication
Jan 20 at 7:12

You should make sure you have the .woff2 and .woff files in your dir, and then point to those in your font-face src, following the rules for how to point to a file (using url()) and how to indicate the format (using format()). And on a sidenote, format("ttf") doesn't exist, so it's worth giving developer.mozilla.org/en-US/docs/Web/CSS/@font-face a read-through.

– Mike 'Pomax' Kamermans
Jan 20 at 17:19

add a comment |

Which folder is your main.css in?

– AndrewL64
Jan 19 at 18:33

Strong recommendation to not use ttf, it's was never meant for webfont use. Use woff2/woff and don't have anything else in there.

– Mike 'Pomax' Kamermans
Jan 19 at 19:29

@Mike'Pomax'Kamermans Should I rename the files to end in woff2/woff? Or just replace format with woff2/woff?

– Dextication
Jan 20 at 7:12

You should make sure you have the .woff2 and .woff files in your dir, and then point to those in your font-face src, following the rules for how to point to a file (using url()) and how to indicate the format (using format()). And on a sidenote, format("ttf") doesn't exist, so it's worth giving developer.mozilla.org/en-US/docs/Web/CSS/@font-face a read-through.

– Mike 'Pomax' Kamermans
Jan 20 at 17:19

Which folder is your main.css in?

– AndrewL64
Jan 19 at 18:33

Strong recommendation to not use ttf, it's was never meant for webfont use. Use woff2/woff and don't have anything else in there.

– Mike 'Pomax' Kamermans
Jan 19 at 19:29

@Mike'Pomax'Kamermans Should I rename the files to end in woff2/woff? Or just replace format with woff2/woff?

– Dextication
Jan 20 at 7:12

You should make sure you have the .woff2 and .woff files in your dir, and then point to those in your font-face src, following the rules for how to point to a file (using url()) and how to indicate the format (using format()). And on a sidenote, format("ttf") doesn't exist, so it's worth giving developer.mozilla.org/en-US/docs/Web/CSS/@font-face a read-through.

– Mike 'Pomax' Kamermans
Jan 20 at 17:19

add a comment |

2 Answers
2

active

oldest

votes

You can import the font directly from google by adding this

   @import url('https://fonts.googleapis.com/css?family=Roboto');

And using it with this font-family: 'Roboto', sans-serif;
You can find more details here https://fonts.google.com/specimen/Roboto?selection.family=Roboto

answered Jan 19 at 19:27

Radu

169214

add a comment |

When you use a path starting with a ./ this means the path should start from the current directory. If your main.css file is in the app folder, it will import the roboto-font.css file correctly.

However, the roboto-font.css file is trying to import the font file from the path ./assets/Roboto/Roboto-Thin.ttf while roboto-font.css itself is already inside assets/Roboto. You should remove the assets/Roboto from this url() property as all font files are already in the same directory as this stylesheet. Try using url(./Roboto-Thin.ttf).

Also try to use appropriate web font formats, or just import from Google as suggested by @Radu.

answered Jan 19 at 19:32

Guilherme Vieira

596

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54270092%2fwhy-does-using-import-url-assets-roboto-roboto-font-css-not-work%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

You can import the font directly from google by adding this

   @import url('https://fonts.googleapis.com/css?family=Roboto');

And using it with this font-family: 'Roboto', sans-serif;
You can find more details here https://fonts.google.com/specimen/Roboto?selection.family=Roboto

answered Jan 19 at 19:27

Radu

169214

add a comment |

You can import the font directly from google by adding this

   @import url('https://fonts.googleapis.com/css?family=Roboto');

And using it with this font-family: 'Roboto', sans-serif;
You can find more details here https://fonts.google.com/specimen/Roboto?selection.family=Roboto

answered Jan 19 at 19:27

Radu

169214

add a comment |

You can import the font directly from google by adding this

   @import url('https://fonts.googleapis.com/css?family=Roboto');

And using it with this font-family: 'Roboto', sans-serif;
You can find more details here https://fonts.google.com/specimen/Roboto?selection.family=Roboto

answered Jan 19 at 19:27

Radu

169214

You can import the font directly from google by adding this

   @import url('https://fonts.googleapis.com/css?family=Roboto');

And using it with this font-family: 'Roboto', sans-serif;
You can find more details here https://fonts.google.com/specimen/Roboto?selection.family=Roboto

answered Jan 19 at 19:27

Radu

169214

answered Jan 19 at 19:27

Radu

169214

answered Jan 19 at 19:27

Radu

169214

answered Jan 19 at 19:27

Radu

169214

add a comment |

When you use a path starting with a ./ this means the path should start from the current directory. If your main.css file is in the app folder, it will import the roboto-font.css file correctly.

Also try to use appropriate web font formats, or just import from Google as suggested by @Radu.

answered Jan 19 at 19:32

Guilherme Vieira

596

add a comment |

When you use a path starting with a ./ this means the path should start from the current directory. If your main.css file is in the app folder, it will import the roboto-font.css file correctly.

Also try to use appropriate web font formats, or just import from Google as suggested by @Radu.

answered Jan 19 at 19:32

Guilherme Vieira

596

add a comment |

When you use a path starting with a ./ this means the path should start from the current directory. If your main.css file is in the app folder, it will import the roboto-font.css file correctly.

Also try to use appropriate web font formats, or just import from Google as suggested by @Radu.

answered Jan 19 at 19:32

Guilherme Vieira

596

When you use a path starting with a ./ this means the path should start from the current directory. If your main.css file is in the app folder, it will import the roboto-font.css file correctly.

Also try to use appropriate web font formats, or just import from Google as suggested by @Radu.

answered Jan 19 at 19:32

Guilherme Vieira

596

answered Jan 19 at 19:32

Guilherme Vieira

596

answered Jan 19 at 19:32

Guilherme Vieira

596

answered Jan 19 at 19:32

Guilherme Vieira

596

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku