846
Views
9
Comments
Solved
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.


2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Solution

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

TestImport.oml
2020-09-15 13-07-23
Kilian Hekhuis
 
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.

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Solution

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

TestImport.oml
2020-09-11 09-16-02
Apisara P.

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.


2020-09-15 13-07-23
Kilian Hekhuis
 
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.

2020-09-11 09-16-02
Apisara P.

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. 😀

2020-09-15 13-07-23
Kilian Hekhuis
 
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.

UserImage.jpg
sachin kannaujiya

1:import google font link in your css (Theme editor) editor, make sure your are importing google font  link in  root directory.

for more details please check screenshot.

2: paste font-family in in your class.

its working properly for me....

Screenshot 2022-12-01 120906.png
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Sachin,

You're replying to an old topic that's already been answered. Please check the date of a post before replying.

2024-07-31 11-32-34
ndy

Dear @Apisara P.
You need to import url at the top of your theme.

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