Font Changing to Inherited Font on Screensize Change
I'm attempting to make a simple site mobile responsive using "@media only screen", but one of my titles is reverting to an inherited font rather than continuing to use the CSS defined font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<h4> Short Title </h4>
</body>
//CSS
[class*="h4"]{
font-size: 5vw;
}
@media only screen and (min-width: 800px){
h4{
font-family: 'Pacifico', cursive;
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
On Inspect mode in Google Chrome, it indicates that upon a smaller screen size, h4 is inheriting it's font from it's container element, col-8.
.col-8{
font-family:'Open Sans', sans-serif;
}
Every other element on the site is correctly changing when the screen size is lowered below the defined 800px, including other text, and I've repeatedly cleared my cache throughout the process to no avail. !important seems to have no effect either.
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
html css
asked Nov 28 '18 at 16:47
NikkiNikki
31
add a comment |
I'm attempting to make a simple site mobile responsive using "@media only screen", but one of my titles is reverting to an inherited font rather than continuing to use the CSS defined font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<h4> Short Title </h4>
</body>
//CSS
[class*="h4"]{
font-size: 5vw;
}
@media only screen and (min-width: 800px){
h4{
font-family: 'Pacifico', cursive;
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
On Inspect mode in Google Chrome, it indicates that upon a smaller screen size, h4 is inheriting it's font from it's container element, col-8.
.col-8{
font-family:'Open Sans', sans-serif;
}
Every other element on the site is correctly changing when the screen size is lowered below the defined 800px, including other text, and I've repeatedly cleared my cache throughout the process to no avail. !important seems to have no effect either.
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
html css
asked Nov 28 '18 at 16:47
NikkiNikki
31
Could you not simply just add an '! important' to it?
– JamesS
Nov 28 '18 at 16:54
!important doesn't seem to affect it at all
– Nikki
Nov 28 '18 at 16:57
add a comment |
I'm attempting to make a simple site mobile responsive using "@media only screen", but one of my titles is reverting to an inherited font rather than continuing to use the CSS defined font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<h4> Short Title </h4>
</body>
//CSS
[class*="h4"]{
font-size: 5vw;
}
@media only screen and (min-width: 800px){
h4{
font-family: 'Pacifico', cursive;
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
On Inspect mode in Google Chrome, it indicates that upon a smaller screen size, h4 is inheriting it's font from it's container element, col-8.
.col-8{
font-family:'Open Sans', sans-serif;
}
Every other element on the site is correctly changing when the screen size is lowered below the defined 800px, including other text, and I've repeatedly cleared my cache throughout the process to no avail. !important seems to have no effect either.
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
html css
asked Nov 28 '18 at 16:47
NikkiNikki
31
I'm attempting to make a simple site mobile responsive using "@media only screen", but one of my titles is reverting to an inherited font rather than continuing to use the CSS defined font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<h4> Short Title </h4>
</body>
//CSS
[class*="h4"]{
font-size: 5vw;
}
@media only screen and (min-width: 800px){
h4{
font-family: 'Pacifico', cursive;
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
On Inspect mode in Google Chrome, it indicates that upon a smaller screen size, h4 is inheriting it's font from it's container element, col-8.
.col-8{
font-family:'Open Sans', sans-serif;
}
Every other element on the site is correctly changing when the screen size is lowered below the defined 800px, including other text, and I've repeatedly cleared my cache throughout the process to no avail. !important seems to have no effect either.
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
html css
html css
asked Nov 28 '18 at 16:47
NikkiNikki
31
asked Nov 28 '18 at 16:47
NikkiNikki
31
asked Nov 28 '18 at 16:47
NikkiNikki
31
asked Nov 28 '18 at 16:47
NikkiNikki
31
asked Nov 28 '18 at 16:47
NikkiNikki
31
31
Could you not simply just add an '! important' to it?
– JamesS
Nov 28 '18 at 16:54
!important doesn't seem to affect it at all
– Nikki
Nov 28 '18 at 16:57
add a comment |
Could you not simply just add an '! important' to it?
– JamesS
Nov 28 '18 at 16:54
!important doesn't seem to affect it at all
– Nikki
Nov 28 '18 at 16:57
Could you not simply just add an '! important' to it?
– JamesS
Nov 28 '18 at 16:54
Could you not simply just add an '! important' to it?
– JamesS
Nov 28 '18 at 16:54
!important doesn't seem to affect it at all
– Nikki
Nov 28 '18 at 16:57
!important doesn't seem to affect it at all
– Nikki
Nov 28 '18 at 16:57
add a comment |
1 Answer
1
active
oldest
votes
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
Just set font-family: 'Pacifico', cursive; to your h4 element outside of the @media statement. This way no matter the size of your page, Pacifico (as long as it has loaded) will be the font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<div class="col-8">
<h4> Short Title </h4>
</div>
</body>
//CSS
h4{
font-family: 'Pacifico', cursive;
}
.col-8{
font-family:'Open Sans', sans-serif;
}
@media only screen and (min-width: 800px){
h4{
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
answered Nov 28 '18 at 17:04
SamuelBSamuelB
645
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53524321%2ffont-changing-to-inherited-font-on-screensize-change%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
Just set font-family: 'Pacifico', cursive; to your h4 element outside of the @media statement. This way no matter the size of your page, Pacifico (as long as it has loaded) will be the font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<div class="col-8">
<h4> Short Title </h4>
</div>
</body>
//CSS
h4{
font-family: 'Pacifico', cursive;
}
.col-8{
font-family:'Open Sans', sans-serif;
}
@media only screen and (min-width: 800px){
h4{
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
answered Nov 28 '18 at 17:04
SamuelBSamuelB
645
add a comment |
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
Just set font-family: 'Pacifico', cursive; to your h4 element outside of the @media statement. This way no matter the size of your page, Pacifico (as long as it has loaded) will be the font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<div class="col-8">
<h4> Short Title </h4>
</div>
</body>
//CSS
h4{
font-family: 'Pacifico', cursive;
}
.col-8{
font-family:'Open Sans', sans-serif;
}
@media only screen and (min-width: 800px){
h4{
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
answered Nov 28 '18 at 17:04
SamuelBSamuelB
645
add a comment |
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
Just set font-family: 'Pacifico', cursive; to your h4 element outside of the @media statement. This way no matter the size of your page, Pacifico (as long as it has loaded) will be the font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<div class="col-8">
<h4> Short Title </h4>
</div>
</body>
//CSS
h4{
font-family: 'Pacifico', cursive;
}
.col-8{
font-family:'Open Sans', sans-serif;
}
@media only screen and (min-width: 800px){
h4{
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
answered Nov 28 '18 at 17:04
SamuelBSamuelB
645
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
Just set font-family: 'Pacifico', cursive; to your h4 element outside of the @media statement. This way no matter the size of your page, Pacifico (as long as it has loaded) will be the font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<div class="col-8">
<h4> Short Title </h4>
</div>
</body>
//CSS
h4{
font-family: 'Pacifico', cursive;
}
.col-8{
font-family:'Open Sans', sans-serif;
}
@media only screen and (min-width: 800px){
h4{
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
answered Nov 28 '18 at 17:04
SamuelBSamuelB
645
edited Nov 28 '18 at 17:10
answered Nov 28 '18 at 17:04
SamuelBSamuelB
645
answered Nov 28 '18 at 17:04
SamuelBSamuelB
645
answered Nov 28 '18 at 17:04
SamuelBSamuelB
645
645
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53524321%2ffont-changing-to-inherited-font-on-screensize-change%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could you not simply just add an '! important' to it?
– JamesS
Nov 28 '18 at 16:54
!important doesn't seem to affect it at all
– Nikki
Nov 28 '18 at 16:57