You supply the artwork… we’ll build the skins!™

The DotNetNuke community is one of the best around
which makes contributing so much easier

You are here: Blog
Wednesday, September 20, 2017

Dotnetnuke, Web Design and Online Marketing articles

Using Google web fonts in a DotNetNuke website

Apr 28

Written by:
Thursday, April 28, 2011  RssIcon

Google web fonts has a selection of non-standard typefaces that can be used in any website, and works by including a stylesheet link to a hosted CSS file in the <head> section of the HTML document, and then defining a style within the website CSS file that uses the new font family.

Google web fonts has a selection of non-standard typefaces that can be used in any website, and works by including a stylesheet link to a hosted CSS file in the <head> section of the HTML document, and then defining a style within the website CSS that uses the new font family.

The steps to adding a Google web font to a DNN site are:

  1. select a font,
  2. add the CSS file link,
  3. update the CSS file/s.

Choosing a font to use.

Browse and select a font from the Google web fonts font list, selecting a typeface from here brings up the details and options for that particular font including the license, character set, font info, and a file download so you can use the font in artwork. There's also a "Use this font" option that gives details of the link code to be added to the HTML, as well as an example of how to setup the CSS file. The "Quattrocento Sans" font will be used as an example in this article.

Google web fonts

Adding the link

The link code is found in the "Use this font" option and for Quattrocento it is:

<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'>

There are multiple options for including links in the <head> section of a DNN site, the 2 methods below cover instances where the font is to be used either site-wide, or on a page-by-page basis.

Using the font on all the pages in your DNN site

To include a link on all pages within a DotNetNuke website add the [STYLES] SkinObject code to the skinname.ascx file within the skins directory, by:

  1. registering the [STYLES] SkinObject code by adding <%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %> to the top of the .ascx file
  2. including the SkinObject code using the link details for the Google web font: <dnn:STYLES runat="server" ID="Quattrocento" Name="Quattrocento" StyleSheet="http://fonts.googleapis.com/css?family=Smythe" UseSkinPath="false" />
[STYLES] SkinObject

Note: changes will need to be made to the ID, Name, and Stylesheet depending on the font being used.

Using the font on one page

If the font is being added to one page of the DNN site, paste the link code in the Page Header Tags input box located within the page Settings > Advanced Settings.

Page Header Tags

Updating the CSS file/s

Within the "Use this font" option there is an example of the font-family definition for use in the website CSS file, for Quattrocento Sans it looks like;

h1 { font-family: 'Quattrocento Sans', arial, serif; }

This renders the font on all H1 elements, and can to be added to either the:

  • page Settings > Advanced Settings > Page Header Tags (it will need to be wrapped in a <style> tag),
  • skin.css,
  • skinname.css,
  • or to the Stylesheet Editor within the Admin > Site Settings page. This updates the Portal.css file and loads last, so if the skin.css or skinname.css can't be modified, this is the best place to add the CSS.
Stylesheet Editor

Once the link and CSS code have been added, a browser refresh (ctrl + r) will show the new font being used.

H1 titles on the PSDtoDNN site before:

Before Google web fonts

H1 titles on the PSDtoDNN site after:

After Google web fonts

Below is a short PSDtoDNN YouTube video, showing how to use Google web fonts within a DotNetNuke site:

Copyright 2009 - 2011 PSDtoDNN - You supply the artwork… we'll build the skins!™
DotNetNuke®, DNN®, and the DotNetNuke logo are trademarks of DotNetNuke Corporation