Google fonts and Media Queries

In my attempt to create a Portfolio I used a couple of Google Fonts. Here’s the stylesheet it gave me to use.

<link href="https://fonts.googleapis.com/css?family=Black+Ops+One|Fredericka+the+Great|Inknut+Antiqua" rel="stylesheet">

I have that of course in the . And then in the CSS the website gave me:

font-family: 'Inknut Antiqua', serif;
font-family: 'Black Ops One', cursive;
font-family: 'Fredericka the Great', cursive;

So I’ve discovered that using these fonts is conflicting with my media queries. When I remove them then I can change font sizes with the change in width. With them it doesn’t change at all.

Here is the web query I have been using:

@media only screen and (max-width:480px){
  .rnd{font-size:1em;
    font-family:cursive;
  }
  .menu-text{
    font-size:1em;
    font-family:san-serif;
  }
}

Like I said without the custom fonts, the query works great. Is there any additional code that I need to input so that I can still use my google fonts AND the media query??

Thanks in advance.

I would need more info than that to give you an answer. I am barely understanding what you are describing here.

Ok what else do you need?

As I stated I can get media queries to change the text size without the use of googlefonts. But once I add in the googlefonts code into the HTML and my CSS then the media query no long functions (ie the font no longer changes size automatically with the width variance).

If there is any other code you think you need, then let me know and I will provide it.

Try using px instead of ems just to see if it works that way and let me know.

Tried that and no change. With the google font active the query doesn’t work.

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Could you post a link to codepen, if any?

Sure here’s a link.

And @kevcomedia thanks for letting me know how to enter code blocks and cleaning up my previous post.

Delete lines from 133 to 140, that’s not how you declare fonts. Maybe you’d want to check “@font-face Rule”, but I think just including the link of google font on the html is enough for you to use it on your CSS straightforward.

Also check your syntax, you have misspelled properties a lot.

Thanks for the heads up on the not needed lines of code. I took them directly from the google website, (still new at all this). And thanks for the heads up on some misspellings, although I only found 3 and none of them seemed like they would have any effect on whether or not my media query should work…

Any other suggestions?

The syntax mistakes won’t affect your media queries, but spelling “margins” instead of “margin” won’t make your margins work.

If you delete the fonts that i mentioned from CSS the media query will work. It did for me. The google fonts page suggests you use the declaration font-style: ‘fontname’, serif, inside the id, class or html element.