Best Practice for Loading Webfonts
I'm trying to figure out how one would load a new font using google webfonts for use in a forum. How is this done for a theme in Vanilla? Is there a general way in which scripts and stylesheets are loaded within Vanilla?
Tagged:
0
Comments
I've achieved it thus far by adding the following to my theme's default.master.tpl's head:
<head> {asset name='Head'} //what i added is below {literal} <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Quicksand:400,700"> {/literalThat is a fine way of doing it.
Search first
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
The other way of doing it would be to cut and paste the css that is contained in that css file to the top of your custom.css file. If you click the link in your example you can see that there's actually just a small amount css to load the fonts.
@Todd: Thought I'd mention that the generated CSS is user-specific and shouldn't be hardcoded: https://developers.google.com/fonts/docs/technical_considerations
Just a heads up
Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub
When you assign a custom font make sure you provide one or two alternatives that would also work with you theme, and are standard web fonts.
grep is your friend.
@fraxture you could use the plugin VFonts and add your font to it.
You can also convert the fonts to base 64 data and add it to the css.
http://www.motobit.com/util/base64-decoder-encoder.asp
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌