Fonts

feedwind-icon-trans Easy Steps

Choose fonts in the setup screen


  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. Enter a font size and/or choose the font colors
  4. Check the preview pane to see if your widget displays correctly
  5. 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.

Options:

 

Choose a font Family

There are three ways to change the font family for FeedWind:

The FeedWind setup screen
Creating a custom CSS
Google Fonts can be activated with just a single line of code in your custom CSS file.

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.

Note: You also have the opportunity to alter the size and color in this section, just below the font style dropdown.

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

Font Colors

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

Changing the font in FeedWind using a custom CSS

To use a custom CSS you will first have to create a CSS file that contains the standard components required for FeedWind and offer the opportunity for you to add more CSS to modify the output and its formatting. You can put this CSS file anywhere online as long as you can point a URL to it. This will particularly suit those who don’t have access to online storage – for example if you use a 3rd party website builder such as Wix, you may not be allowed to store any CSS files at the site builder’s server – they want to tie you into their product as much as possible.

To get around this problem easily, services like Dropbox can be used to store your custom CSS file to get a URL for it to insert into the FeedWind setup. There are many possible customizations to the FeedWind RSS widget using custom CSS; your imagination and the limitations of your site design will determine what you can create. Try out some custom CSS – it’s a lot easier than you might imagine – even for a beginner!


Option 4: Using Google Fonts with FeedWind

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 custom CSS, look up the font at Google and 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.

Note: Settings made in your custom CSS will override most settings from the FeedWind setup screen

Multiple Webfonts can be applied by adding extra ‘@import’ values (see item 6 above) to the top of the custom CSS and applying the attributes in the Custom CSS. Our example below is using multiple Google Fonts in the CSS.

Tip: If you use an online platform or for any other reason you want to store your CSS file elsewhere, please check out this article on how to use Dropbox to host CSS.

CSS Code Example

Example Widget

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(http://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("http://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 a:link{
 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 a: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 a: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 a: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 a{
 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 a: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 a: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 a: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 a: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;
}

 


 

 

April 18, 2016 3:18 pm