I am a massive derp at this custom profile thing and am, yet again, stuck...
When creating a custom profile, you have three dropdown menus for Google Fonts. How do I specify in the CSS which text gets which google font applied to it? At the moment, I have three fonts selected but none of them show up on the website preview. Really baffled as to how to go about this. Would love some help.
Thanks ahead of time!
When creating a custom profile, you have three dropdown menus for Google Fonts. How do I specify in the CSS which text gets which google font applied to it? At the moment, I have three fonts selected but none of them show up on the website preview. Really baffled as to how to go about this. Would love some help.
Thanks ahead of time!
You have to define which elements will use which fonts. So, if you want one font to be the base font that most of your text uses, you could do...
body {font-family: Google Font Name, arial, sans-serif;}
And if you want the main titles to use another font, try
h1, h2 {font-family: Google Font Name 2, times new roman, serif;}
And the lesser titles to use yet another, you'd do something like this..
h3,h4,h5,h6 {font-family: Google Font Name 3, times new roman, serif;}
body {font-family: Google Font Name, arial, sans-serif;}
And if you want the main titles to use another font, try
h1, h2 {font-family: Google Font Name 2, times new roman, serif;}
And the lesser titles to use yet another, you'd do something like this..
h3,h4,h5,h6 {font-family: Google Font Name 3, times new roman, serif;}
Wow, what a snappy response! (Not the bad kinda snappy... the fast kind of snappy! xD)
Thanks so much Kim, I'll give that a try. ^^ Sorry for the probably really obvious question. I'm still getting the hang of CSS and I googled about a million different things but couldn't find what told me how to utilize those. Anyway, thank youuu~
Edit: That did the trick! It was so simple I feel silly for asking... xD
Double Edit: So... The other fonts that follow the font I write in as the main one are fallback fonts, right? Like if the first listed font for some reason isn't supported on someone's browser, it'd use one of the other fonts listed after it?
Thanks so much Kim, I'll give that a try. ^^ Sorry for the probably really obvious question. I'm still getting the hang of CSS and I googled about a million different things but couldn't find what told me how to utilize those. Anyway, thank youuu~
Edit: That did the trick! It was so simple I feel silly for asking... xD
Double Edit: So... The other fonts that follow the font I write in as the main one are fallback fonts, right? Like if the first listed font for some reason isn't supported on someone's browser, it'd use one of the other fonts listed after it?
You're super duper welcome!
And yup, exactly. Write them in order of most desired to least desired but still acceptable, and then conclude with the most generic guideline possible in case of a total failure to find one of your fonts (typically, this will just be "serif" or "sans-serif"). Google fonts means the font you want will almost always be available, but you never know. There are rare circumstances in which they can't or won't be supported, and since it's so easy to prepare against the eventuality, I recommend it.
And yup, exactly. Write them in order of most desired to least desired but still acceptable, and then conclude with the most generic guideline possible in case of a total failure to find one of your fonts (typically, this will just be "serif" or "sans-serif"). Google fonts means the font you want will almost always be available, but you never know. There are rare circumstances in which they can't or won't be supported, and since it's so easy to prepare against the eventuality, I recommend it.
Thank you so much for your help, Kim... again! c: I have a much better understanding of how that all works now. Learning step by step. ^^ I hope this post can help others out there at some point as well.
You are on: Forums » Help » Google Fonts: How To?
Moderators: Mina, Keke, Cass, Claine, Sanne, Dragonfire, Ilmarinen, Darth_Angelus