Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...How to add external fonts to the skin and containerHow to add external fonts to the skin and container
Previous
 
Next
New Post
10/8/2014 7:27 AM
 

Hi all,

I have to add some  external websafe fonts as per the requirement in the skin and container. Can anyone please guide me how to add the fonts folder and fonts refrence to the skin and container in the website.

 

 

Thanks

Sansugoi

 
New Post
10/9/2014 5:14 PM
 

We use embedded fonts in one of the dnn skins - see Portals\_default\Skins\Facebook\skin.css

@font-face

 { font-family: 'TitilliumText22LBold';

src: url('Fonts/TitilliumText22L005-webfont.eot');

src: url('Fonts/TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),

url('Fonts/TitilliumText22L005-webfont.ttf') format('truetype'),

url('Fonts/TitilliumText22L005-webfont.woff') format('woff'),

url('Fonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg');

font-weight: normal; font-style: normal;

}

This is preferable to using external fonts as that may slow down page loads, but if you want to do so see http://css-tricks.com/snippets/css/using-font-face/


Buy the new Professional DNN7: Open Source .NET CMS Platform book Amazon US
 
New Post
10/10/2014 4:05 AM
 

Hi Sansugoi,

The other way is to import the font face into your skin file...

(I'm using google fonts as an example below) 

go to google fonts, then find the font you want to use.

Click on the "Quick use" icon then set the settings/sizes etc., for the font.

Go to step 3 "Add this code to your website"

Click the "@import" tab and copy the code

In you skin.css, at the top, paste the import code, this imports the fonts from google. By importing the font here, it should be available for the skin and containers. 

Now in you css add the css from step 4...

body { font-family: 'Roboto', sans-serif; } for example.

Hope this helps,

Regards,

Geoff


      
 
New Post
10/10/2014 4:37 PM
 
and another way in the skin file...

< dnn:DnnCssInclude runat="server" FilePath="https://fonts.googleapis.com/css?family=Montserrat:400,700" Priority="11" />

then in your css:

element {
font-family: 'Montserrat', sans-serif;
}
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...How to add external fonts to the skin and containerHow to add external fonts to the skin and container


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out