Is there a best practice for adding a Google Font to a Laravel Project?

cchapman picture cchapman · Mar 4, 2015 · Viewed 8.1k times · Source

I apologize that I'm not even sure where I would get started in terms of doing pre-research myself. I hope this isn't an opinion-based question, but a specific Laravel usage question. I'm curious if there is a specific way to go about including a Google font, or multiple Google fonts in a Laravel project. I could easily drop it in as if it were any other web page, but my instincts tell me that there's probably a more robust way of using the fonts than just placing the

<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300' rel='stylesheet' type='text/css'>

include line in a main Blade layout template. Sure, I might even be able to shorten it with Blade with {{ HTML::style(...) }} or such, but that still doesn't seem to fully utilize the Laravel framework.

For example, let's say I want to change the specific font I'm using: If I'm using multiple templates, I would have to go in and change each of the include lines where that font is introduced. But ideally, I would want to have just one google-font variable where I could adjust it in just one place.

And if it wouldn't be too much to ask, would you also be able to explain any of the theory on where and how these font variable should/could be stored?

Answer

Andy Fleming picture Andy Fleming · Mar 4, 2015

I'm not sure if I completely follow your question, but there are a number of approaches, but this sounds like more of a template inclusion/extension issues more than anything related to the fonts themselves.

You could include a snippet so you don't have change the font in multiple places:

In the places where you want to include the font in the head of a template:

@include('snippets.fonts')

In the snippets/fonts.blade.php:

<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300' rel='stylesheet' type='text/css'>

You'll still need to handle the CSS though somewhere though. So you'll have to have something like:

h1 { font-family: Oxygen, Arial, sans-serif; }

All in all though, there are only 2 places you would have to update the font.