1. Home
  2. Support
  3. Widget - General setting
  4. Fonts

Fonts

  • Created : Apr, 18, 2016
  • Last Updated: Oct, 2, 2022

Easy Steps

Easy to set Fonts
  1. Open your widget for editing (or create a new one)
  2. Visit the "General/Titles/Content" section of the setup screen depending on which font item you wish to style
  3. Choose a font style from the dropdown menu
  4. Enter a font size and/or choose font colors
  5. Check the preview pane to see if your widget displays correctly
  6. Save your widget using the Save & Get code button

Customize fonts in your FeedWind widget

This tutorial is focused on fonts and will instruct you on how to change the styling of fonts that are used in the FeedWind RSS widget.

Quick Links:

Choose a font Family

There are several ways to choose a font family for FeedWind:

  1. The FeedWind setup screen
  2. Creating a custom CSS
  3. Google Fonts

Option 1. Choosing websafe fonts from the setup screen

To begin with, there are a standard selection of web-safe fonts in the Feed Title and Feed Content ►Advanced Settings sections of the setup screen.

The standard font families supported by Internet browsers which we support are:

  • Times New Roman
  • Arial/Helvetica/Sans-Serif
  • Courier
  • Trebuchet MS
  • Verdana
  • Geneva

There are many browsers and not all fonts are available as standard in them all but there will be a replacement that will be very similar in style and proportion. This is why “font families” are used, so that standardized font replacements can be specified. Select the font family you want from the list.

rss widget font family

Feed Title font size

You can choose a font size for your main widget title in the Feed Title settings section.

rss widget fonts

 

 

Feed Content font size

You can choose a font size for your feed content, for both the Feed Item Titles and for the Feed Content in the Feed Content settings section.

rss widget font

 

Feed Title bold style

Enable/Disable bold styling for the Feed Title.

feed title bold style

 

Feed Item Title bold style

Enable/Disable bold styling for Feed Item Titles.

rss feed item title bold

 

Font color

Choose font colors for the Feed Item Titles and the Feed Content by clicking on the color picker  ●  or entering the hexadecimal color number.

rss widget colors

 

Option 2: Changing the font in FeedWind using CSS

First you need to create a custom CSS file and add the URL to your FeedWind setup screen. Then, to use a custom font in your widget you can add @font-face to the CSS file. This allows you to upload your font file in any of the popular formats for fonts (TTF, EOT, OTF etc..) and allow FeedWind to find and use it.

Here is an example the CSS required to use a TTF font called “SuperBoldRegular” in your widget.

@font-face {
font-family: "SuperBoldRegular";
src: url("SuperBoldRegular.ttf") format("truetype");
font-weight: normal;

 

Option 3: Using Google Fonts

google-fonts-rssTo create an RSS widget that uses Google Fonts you will need to create a custom CSS. You can copy the example given at the bottom of this article to get a template for your custom CSS file. You can create a feed widget to embed in a website that will match the design of the site where required or simply create a custom RSS widget that looks stunning and will impress your site visitors. The combination of Google Fonts and CSS gives you all the scope you need to build a widget of any style or design. Search for the font(s) you want at the Google fonts website

Take the following steps to implement Google Webfonts for one or more of your widgets:

  1. Click on the font name you chose
  2. Open the toolbox from the toolbar at the bottom of the screen
  3. Select the @IMPORT tab
  4. Copy the @import line of code
  5. Paste this line of code at the top of your Feedwind custom  CSS

google fonts rss widget
feedwind rss widget google fonts

google fonts rss widget

When you have setup your CSS and placed the widget HTML into a web page, the target browser will check out your CSS, look up the font at Google and then integrate it into the style of your widget. See the example below for an idea of how the CSS should look and the resulting widget to the right of the CSS.

Multiple Webfonts can be applied by adding extra ‘@import’ values to the top of the custom CSS and applying those attributes to relevant widget elements in the CSS. Our example below is using multiple Google Fonts in the CSS.

 

Example Widget using Google fonts [Noto Sans]

CSS Code Example
This is an example custom CSS file using Google Font “Noto Sans”:

 

/* This adds the ability to utilize Google WebFonts in your FeedWind widget */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);

/* This is the styling for main feed container - NOTE: the background-color affects the footer background.*/
#fw-container {
 text-align: left;
 padding: 10px;
 font-family: 'Noto Sans', Helvetica, sans-serif;
 border: 1px solid #0E4FAE;
 border-radius: 4px;
 box-sizing: border-box;
 background-color:#4e82d0;
}

/* This is the styling for the header container*/
#header {
 margin: 10px 20px 10px 20px;
 color: #fff;
 font-size: 18px;
 background-color: #888;
 background-image: url("https://glassho.me/fwtest/bannertop.png");
 background-repeat: repeat-x;
}

a.fw-feed-item-url {
 text-decoration: none;
}

.fw-feed-item {
 display:block;
 }

/* This is the styling for the main Feed Title in the header container*/
.fw-feed-title {
 margin: 10px 20px 10px 20px;
 font-weight: bold;
 word-wrap: break-word;
 text-align: center;
 text-shadow: 2px 1px 0px #000080;
 display:block;
}

/* This is the styling for the Feed Title link in the header container*/
.fw-feed-title a:link {
 color: #fef;
 text-decoration: none;
}

/* This is the styling for a "visited" Feed Title link in the header container*/
.fw-feed-title a:visited {
 color: #ddd;
 text-decoration: none;
}

/* This is the styling for a Feed Title link on "mouseover" (also known as "hover") in the header container*/
.fw-feed-title a:hover {
 color: #fff;
 text-decoration: none;
}

/* This is the styling for an "active" Feed Title link in the header container*/
.fw-feed-title a:active {
 color: #fff;
 text-decoration: none;
}

/* This is the styling for the feed body (i.e all Feed Items) container. */
/* WARNING: be careful adding Left or Right Padding as you can lose the scrollbar when the L/R padding is set to more than 8px; the scrollwheel on a mouse still works, however, but the scrollbar can disappear after 8px of padding either side. Use Margins instead add space around the content container.*/


/* This is the styling for the Feed Item content in the body container*/
.fw-feed-item-content-module {
 margin: 10px;
 height: 160px;
 padding: 10px;
 border-bottom: 1px solid #bbceeb;
 box-shadow: 0px 1px 1px #222;
 background-color: #d1e3ff;
}

/* This is the styling for the Feed Item Title in the body container*/
.fw-feed-item-title {
 display:block; 
}

/* This is the styling for an "unvisited/unclicked" Feed Item Title link in the body container*/
.fw-feed-item-title{
 margin: 20px 0 10px 0px!important;
 color: #00aeff;
 text-decoration: none;
 font-size: 16px;
}

/* This is the styling for a "visited/clicked" Feed Item Title link in the body container*/
.fw-feed-item-title:visited{
 color: #39f;
 padding: 20px 0 0 0;
 text-decoration: none;
}

/* This is the styling for a Feed Item Title link on "mouseover" (also known as "hover") in the body container*/
.fw-feed-item-title:hover{
 color: #39c;
 text-decoration: none;
 padding: 20px 0 0 0;
}

/* This is the styling for an active Feed Item Title link in the body container*/
.fw-feed-item-title:active{
 color: #09f;
 text-decoration: none;
 padding: 20px 0 0 0;
}

/* This is the styling affecting a Feed Item Date for a feed item in the body container*/
.fw-feed-item-date {
 display:block;
 margin: 0 20px 0 3px;
 padding: 0 2px 0 3px;
 color: #999;
 font-size: 10px;
 text-align: right;
}

/* This is the styling affecting a Feed Item Description, Thumbnail or Video Player link for a feed item in the body container*/
.fw-feed-item-link {
 margin: 0 0 0 3px;
 padding: 0 2px 0 3px;
 color: red;
 text-decoration:none;
 }
/* This is the styling affecting an "unvisited/unclicked" Feed Item anchor for a feed item in the body container*/
.fw-feed-item-link{
 color: #123456;
 text-decoration: none;
}

/* This is the styling affecting an "unvisited/unclicked" Feed Item Link anchor for a feed item in the body container*/
.fw-feed-item-link{
 color: #666666;
 text-decoration: none;
}

/* This is the styling affecting an "visited/clicked" Feed Item Link anchor for a feed item in the body container*/
.fw-feed-item-link:visited{
 color: #666666;
 text-decoration: none;
}

/* This is the styling for a Feed Item Title Link Anchor on "mouseover" (also known as "hover") for a feed item in the body container*/
.fw-feed-item-link:hover{
 color: #666666;
 text-decoration: none;
}

/* This is the styling affecting an "active" Feed Item Link anchor for a feed item in the body container*/
.fw-feed-item-link:active{
 color: #666666;
 text-decoration: none;
}

/* This is the styling for the Description in a Feed Item (i.e. the text of a Feed Item in Thumbnail mode, or text+images in Full HTML mode)*/
.fw-feed-item-description {
 font-size: 12px;
 text-align: left;
 margin: 10px;
 color: #666;
 font-weight: 300;
 word-wrap: break-word;
 text-decoration:none;
 display:block;
}

/* This is the styling for a Feed Item Thumbnail - Thumbnail size and layout/orientation can be set here. This does not affect a YouTube video thumbnail.*/
.fw-feed-item-image {
 width: 150px;
 height: 120px;
 float: left;
 text-align: left;
 margin: 20px 20px 10px 10px;
}

.fw-feed-item-image-module {
 margin: 20px 20px 20px 20px;
}

/* This styling allows you to create a footer and style it. By default the footer size is set to zero. */
.fw-branding {
 height: 42px;
}

If you need assistance with CSS, fonts or any other FeedWind query, please contact us and we’ll help out.

 

 

Related posts

Changing a Link Target in 3rd Party Content

We are often asked whether it is possible to change the link target for links in feeds. This article...

Beef Up Your Titles

Introducing a new feature to allow you to make titles bold in your FeedWind widgets. You can now make titles...

FeedWind Analytics Feature

FeedWind Analytics Feature

FeedWind’s Analytics feature is a mechanism for users to tally the amount of impressions received by a widget or...

Tutorial Categories

Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now