Topic: Google Font does not Load

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
December 27, 2013 at 3:53 am #4471 Reply
Claire
Guest
I created a child theme (frontier-child) which loads the frontier style.css file as well as the google font through
```
@import url("../frontier/style.css");
@import url(http://fonts.googleapis.com/css?family=Coming+Soon);
```
And then I specified a new font everywhere I can possibly specify in the child theme, but the font doesn’t change to what I wanted.

Here is how I did it – I found the CSS codes used in the frontier theme’s (style.css file) and searched for “font-family”, that’s how I found what codes were used in the frontier theme to specify fonts. So I copied all these lines that contain “font-family” over to the sytle.css file in my child theme and changed all the fonts that contain “font-family” to the fonts I wanted, but it doesn’t work.

Here is what my child theme’s style.css file is like now, and please let me know how I can change the font. Thank you very much.
```
@import url("../frontier/style.css");
@import url(http://fonts.googleapis.com/css?family=Coming+Soon);

body {
	position: absolute;
	width: 100%;
	color: #303030;
	font-family: 'Overlock', cursive;
	font-size: 13px;
	line-height: 20px;
	background-color: #505050;
}

h1 {font-size: 24px;}
h2 {font-size: 22px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Coming Soon', cursive;
	font-weight: normal;
	clear: both;
}
```
December 27, 2013 at 10:12 am #4475
Ron
Keymaster
I’m looking at your page and I see that the font family used is “Overlock”.
I’m also seeing that you have the css fonts defined on both the child-theme’s style.css AND on the Frontier Options -> CSS

Example:
Frontier Options -> CSS
```
#bottom-bar-text {
	float: left;
	padding: 6px 8px;
	font-family: 'Overlock', cursive;
}
```
On Child Theme Style.css
```
#bottom-bar-text {
	float: left;
	padding: 6px 8px;
	font-family: 'Coming Soon';
}
```
You might want to remove the ones on Frontier Options.
December 28, 2013 at 12:57 am #4478

Claire
Guest

Hey Ron,

You are right. Sorry for the confusion. I wanted all the changes to be made in the child theme’s style.css only. However, I wasn’t able to do so, so I ended up doing all the changes in “Frontier Options -> CSS” last night and it does work there, which is not what I initially wanted all my changes to be documented.

So basically if I make changes in “Frontier Options -> CSS” it works, but it doesn’t work when I make changes in the child theme’s style.css file.

If I delete all the changes I made in the “Frontier Options -> CSS”, and keep all the changes still in the child theme’s style.css, no changes will take place.

I tried two font style “Overlock” and “Coming Soon” in the “Frontier Options -> CSS” and child theme’s style.css respectively just to see which one works.

If you could email me with the email I signed up, I’d be happy to give you the log in information and you can take a look. Feel free to delete my changes in the “Frontier Options -> CSS” if you’d like and I have a backup for the CSS code also.

Thank you very much,

Claire

December 28, 2013 at 9:54 am #4481

Ron
Keymaster

I see you still haven’t removed either of the two css. The first thing to do would be to just remove one. As long as there are two, the one on the Frontier Option will always override the one on the style.css. It would be easier to know what’s actually wrong if were working with just one css declaration.

You may have forgotten to change some font on your style.css I can see that the body and the headers (h1, h2, h3…) are still set to Arial. This may be why you thought that no changes are taking place.

I’m using Firebug to inspect your page and the moment I disable the font declared on the Frontier Options, the ‘Coming Soon’ font takes effect. This leads me to believe that the only things preventing your code on style.css to work properly are 1.)The css on Frontier Options overriding everything and 2.)Some fonts-families on style.css are still set to Arial.

If you still want to send me login info you can send them on my contact page.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)