How to import font from Google Fonts?

I added theses css to the them style sheet, but It's not working.

@import url("//fonts.googleapis.com/css2?family=Mitr");

*{
    font-family: 'Mitr';
}

and I've also tried this

@import url('https://fonts.googleapis.com/css2?family=Mitr&display=swap');
*{
    font-family: 'Mitr';
}

I know how to add font by using font-face, but I think it will be more convenient if I know how to import font from Google Fonts. I really appreciate any help you guys can explain.


mvp_badge
MVP

Hi Apisara,

If you use @font-face, with a src url of the google font, does that work? Also, did you check the console for errors (in your browser's devtools)?

Except for the first url missing https, the @import should work.

mvp_badge
MVP

I just created a simple test module and it works fine.

TestImport.oml

I open TestImport.oml and it works fine, but it's still not working for my module.


There is a warning message like this:

Offline Behavior| The url 'https://fonts.googleapis.com/css2?family=Mitr' will not be cached for offline usage. Consider adding this resource to the module and use it in the stylesheet instead.


mvp_badge
MVP

That warning is not important, you can ignore it (or better, also hide it). The fact that my module works fine but yours doesn't makes me believe your CSS isn't good, e.g. it is overridden by other CSS.

Now I can import Google Font  by create a new theme and change the default module theme to the new one. I copy all css from the original theme to the new one and it's work well. I don't know what I've done something wrong in the original default theme because there was only this css in the style sheet.

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

* {
    font-family: 'Mitr';
}


P.S.  I've tried to create a new app, new module and then add that css to the default theme, but the font is not working. So I create the new theme and change the module theme to the new one. It's work fine. Anyway, It's finally work. Thank you so much of the suggestion. šŸ˜€

mvp_badge
MVP

Hi Apisara,

Glad I could be of help. If any of my answers put you in the right direction, please mark it as Solution, thanks.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.