Skip to content

Instantly share code, notes, and snippets.

@SteveBenner

SteveBenner/google-fonts.rb

Last active October 5, 2016 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SteveBenner/0e93226c317f093e6136 to your computer and use it in GitHub Desktop.
Save SteveBenner/0e93226c317f093e6136 to your computer and use it in GitHub Desktop.
Download ZIP
Helper [tag] that loads Google fonts into your webpage via the web API
Raw
google-fonts.rb
# This tag allows you to load one or more font families into your page via the Google Fonts API
#
# @see https://developers.google.com/fonts/ The Web Fonts Project
# @see http://www.google.com/fonts Google Fonts Repository
#
# @note This tag MUST be placed in the <head></head> section of your webpage.
#
# @overload google_fonts(family)
# Load a single font family in the default 'normal' style
# @param [String, Symbol] family Name of a single font family to load
#
# @overload google_fonts(family, style)
# Load a specific style of given font family
# @param [String, Symbol] family Name of the font family to load
# @param [String, Symbol, Integer] style Name of the font family style to load
#
# @overload google_fonts(family, styles)
# Load multiple styles of specified font family
# @param [String, Symbol] family Name of the font family to load
# @param [Array<String, Symbol, Integer>] styles Styles of specified font family to load.
#
# @overload google_fonts(families)
# Load multiple font families in the default 'normal' style
# @param [Array<String, Symbol>] family List of font families to load
#
# @overload google_fonts(families, style)
# Load the same style of multiple font families
# @param [Array<String, Symbol>] families List of font families to load
# @param [Array<String, Symbol, Integer>] style Name of the style of all loaded font families
#
# @overload google_fonts(families, styles)
# Load the same set of styles of multiple font families
# @param [Array<String, Symbol>] families List of font families to load
# @param [Array<String, Symbol, Integer>] styles List of styles to load from each font family
#
# @overload google_fonts(mapping)
# Load one or more styles of one or more font families according to their mapping
# @param [Hash{String, Symbol => String, Symbol, Integer, Array<String, Symbol, Integer>}] mapping Keys
# represent font families which may be assigned one or more styles in a convenient format
#
# @return [String] HTML of the link tag
#
# @example
# = google_fonts(:inconsolata, :italic) # use Symbols
# = google_fonts('Inconsolata', 'bold') # use Strings
# = google_fonts('Droid Serif', :b) # use abbreviations for bold (b) italic (i) or both (bi)
# = google_fonts('Droid Serif', 700) # use the numerical weight
# = google_fonts('Lato', [100, 300, 400]) # use multiple weights
# = google_fonts('Lato', [100, :b, 'italic']) # mix and match data types (whoaaa)
#
# # Load multiple font families at once, in the same styles
# = google_fonts([:inconsolata, :lato, :droid_serif])
# = google_fonts([:inconsolata, :lato, :droid_serif], :i)
# = google_fonts(['Lato', 'Droid Sans'], [400, :bolditalic])
#
# # Specify exactly which styles of which fonts you need, all in a single convenient Hash
# = google_fonts(lato: 100, 'Droid Sans' => :bold, 'Philosopher' => [100, 300, 400])
#
def google_fonts(*query)
raise ArgumentError, 'Expected at least one font.' if query.empty?
if query.first.is_a? Hash
query = [*query.first].transpose
query = [query.first, query.last.to_enum]
end
api_base_url = 'http://fonts.googleapis.com/css'
# Iterate through given font families, building the query string from them and given styles
query_string = '?family=' + [*query.first].collect { |family|
# Stringify and title-case family name, replacing underscores with spaces
family_str = family.to_s.split(/ |_/).map(&:capitalize).join('+')
# Append any given styles to current font family string
if query[1]
# Using an Enumerator allows for mapping different styles to each font family
styles = query.last.is_a?(Enumerator) ? query.last.next : query.last
# [API] styles are enumerated after a colon, and delineated by a comma
family_str << ':' << [*styles].join(',')
end
family_str
}.join('|') # [API] families are separated by the pipe character
%Q[<link rel="stylesheet" type="text/css" href="#{api_base_url + query_string}" />]
end
Raw
•example-output.html
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata|Lato|Droid+Serif" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata:italic" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata:bold" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif:b" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif:700" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:100,300,400" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:100,b,italic" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata:i|Lato:i|Droid+Serif:i" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:400,bolditalic|Droid+Sans:400,bolditalic" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:100|Droid+Sans:bold|Philosopher:100,300,400" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment