Community Forums › Forums › Archived Forums › Design Tips and Tricks › Google Fonts Not Working
Tagged: adorable theme, google fonts, minimum pro, roboto slab
- This topic has 11 replies, 7 voices, and was last updated 10 years, 2 months ago by Brad Dalton.
-
AuthorPosts
-
December 27, 2013 at 6:57 pm #81482PrayersNApplesMember
I followed the instructions for uploading Google fonts (here) but when I try to change my body font, it doesn't work.
I've changed my style.css to look like this:
/* Import Fonts ------------------------------------------------------------ */ @import url(http://fonts.googleapis.com/css?family=Oswald); @import url(http://fonts.googleapis.com/css?family=Sofia); @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); @import url(http://fonts.googleapis.com/css?family=Cherry+Swash); @import url(http://fonts.googleapis.com/css?family=Roboto+Slab); /* Defaults ------------------------------------------------------------ */ body { background: url(http://prayersandapples.com/wp-content/uploads/2013/12/White.jpg) repeat-x; color: #605f5f; font-family: 'Roboto Slab', serif; font-size: 16px; font-weight: 300; line-height: 1.5625; margin: 0; padding: 0; text-decoration: none; }
And I've edited my CSS stylesheet (directly in the WordPress dashboard) to look like this:
body { font-family: 'Roboto Slab', serif; font-size: 16px; font-weight: 300; }
Any suggestions? (Thanks in advance!)
http://www.prayersandapples.comDecember 27, 2013 at 9:23 pm #81496PrayersNApplesMemberNot sure if it helps if I'm more specific, but I'm trying to get the font (Roboto Slab, serif) from Minimum Pro (http://my.studiopress.com/themes/minimum/#demo-full) onto the main text areas (i.e., blog post content) of my Adorable theme (http://prettydarncute.com/demos/adorable/).
December 27, 2013 at 9:34 pm #81497emasaiParticipantYou might also need to modify the font callout in the functions file.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comDecember 28, 2013 at 8:57 am #81562PrayersNApplesMember@emasai: thank you for your suggestion! Unfortunately, I'm still not having too much luck :/ I was able to get the font to change - but something's not right, because it doesn't look the same as the Minimum Pro demo site. I followed the instructions on Brian Gardner's tutorial: http://www.studiopress.com/tips/google-web-fonts.htm but the font on my website looks smaller. (I've since changed it back because I was worried I was messing with too many things and needed to wait until someone told me how to do it correctly!) I tried to leave my question on that tutorial, but for some reason it won't let me? I also emailed support, but they said they don't have access to the exact coding I would need to copy/paste and suggested I ask for help on the forum.
If anyone could help me figure out how to get the main font on the Adorable theme to look exactly like the font on Minimum Pro, I would really appreciate it! Thanks so much!
December 28, 2013 at 9:49 am #81569Brad DaltonParticipantThis is the correct way to add Google fonts in WordPress in your child themes functions.php file.
//* Enqueue scripts add_action( 'wp_enqueue_scripts', 'minimum_enqueue_scripts' ); function minimum_enqueue_scripts() { wp_enqueue_style( 'minimum-google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400|Roboto+Slab:300,400', array(), CHILD_THEME_VERSION ); }
January 7, 2014 at 1:58 pm #83866Elaine GriffinMemberBrad, if you want to add more than one font, do you put them on the same line and separate with a comma, or do you enqueue each script separately?
Thanks!
ElaineJanuary 7, 2014 at 6:21 pm #83919Brad DaltonParticipantEither way works.
When you select them on Google web fonts, you add them and then grab the code which includes all fonts, or you can do them separately.
February 16, 2014 at 3:32 am #90600tjoudehMemberThank you Brad for your explanation, but for a reason google font is not working on my theme (eleven40 pro), I did everything but the font won't update.
It will be great if you were able to take a look on my blog and let me know if I'm missing something.
http://66.147.244.100/~bitoftec/February 16, 2014 at 4:32 am #90602tjoudehMemberThanks for your explanation, but for a reason google font is not working on my theme (eleven40 pro), I did everything and used the new way which modifies the functions.php page but the font won't update.
Will be great if you were able to take a look on my blog and let me know if I'm missing something.
http://66.147.244.100/~bitoftec/June 25, 2014 at 3:24 pm #111551kevinburke2MemberI know this was from February, but I'm seemingly having the same problem as tjoudeh. I haven't messed with any fonts. I'm using eleven40 pro right out of the box. The fonts are correct when using Safari on a Mac and iOS. But on IE on a PC, it's all messed up - changes the fonts completely. Check out the header.
In Safari on Mac:
In Internet Explorer on PC:
August 17, 2014 at 10:19 am #119364schigkMemberAdding Open sans Google fonts to Enterprise Theme for the text (body) area. Website: http://www.matrixmarketinggroup.com/
I've read everything about this and here's what's I've done. However, the fonts in not change.
1. Add the code below to function.php (child theme), I'm trying to add Open sans Google fonts
/* Enqueue Open san (light) Web Google fonts
add_action( 'wp_enqueue_scripts', 'enterprise_google_fonts' );
function enterprise_google_fonts() {wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:300italic,300', array(), CHILD_THEME_VERSION );
}
2. Here's my css in the child theme
textarea {
color: #555;
font-family: 'Open-Sans', Arial, Helvetica, Tahoma, sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 20px;
margin: 0;
padding: 0;
text-decoration: none;
}input {
color: #333;
font-family: 'Open Sans', Arial, Helvetica, Tahoma, sans-serif;
}August 17, 2014 at 10:35 am #119369Brad DaltonParticipantYour CSS is wrong
Use this class for the widget
.widget_text { color: blue; font-family: Open Sans; }
Or this section I.D
#text-4 { color: red; font-family: Open Sans; }
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.