You can use CSS to embed non-standard web fonts into web pages. This post describes how to set a reference to fonts hosted by a 3rd-party website, such as Google Fonts.
Here’s How:
1. First, select a font from Google Fonts Website: http://www.google.com/fonts
2. Secondly, set a reference to that font in the <head> section of your webpage:
<link href="http://fonts.googleapis.com/css?family=Prosto+One" rel="stylesheet" type="text/css" />
3. Then, reference the font in your CSS:
body {font-family: 'Prosto One', Georgia, Arial;}
Steps 2 & 3 above can actually be cut-and-pasted directly from Google. While this couldn’t be easier to do, please keep in mind these caveats:
- The technique to embed fonts is only available in browsers that support CSS3. All of your site visitors may not see content using an embedded font. Always set fallback, secondary fonts in your CSS, such as
...Georgia, Arial;in the example above. - Your page may load slower (latency) because the font has to be retrieved from a location other than the host website.
- The font will be unavailable if the alternate 3rd-party font site is unavailable.
References
Google: Google Fonts
Web-safe Fonts: WikiPedia
Web-safe Fonts: CssFontStack
Web-safe Fonts: W3Schools
740Digital: Embedded Fonts – How To
This site may contain links to third-party sites. 740Digital website does not endorse, approve, certify, or control these external web sites, and does not guarantee the accuracy or warranties regarding products or services offered by these sites.740Digital Terms of Use