Can I add a font to use in the website?

[coolemail2]

I want to use Omnes Pro on a website. The link to the web font is at https://typekit.com/fonts/omnes-pro
Is there a way I can download it and add it to the repository and use that?
Many thanks, in advance, for any help.

 

[abdi]

Hello Mr. Cool,

Yes of-course you can! (Though you might not have a easier way of importing them to Parallels Presence Builder, unless if you hack it).
Otherwise, you can use the basic w3 way of importing them ..More here:

http://www.w3schools.com/css/css3_fonts.asp

I also think that (I have not tested this) in the installation folder of Parallels Presence Builder is a folder for fonts. Am thinking copying your font to that folder should automatically be detected at the front end.

I haven't tested that theory, I would need a server with Parallels Presence Builder to test it ...

 

[abdi]

BTW: Did you know that you can use the hundreds of Google fonts now with PPB?

http://download1.parallels.com/WPB/...1-for-parallels-automation-release-notes.html

"Site owners can use many fonts from the Google Web Fonts library. These additional fonts are now selectable in the Text & Images modules."

 

[coolemail2]

Thanks abdi
Having a few problems still. From the text/images module, there are some fonts, but certainly not the full suite of Google web fonts.
I want to use one and select it in the Design > Fonts section.
Google says paste this script in the header

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Nunito::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

I have put that into Settings > Advanced > Edit Metadata

but does anyone have a clue as to how I can now use that as the default font throughout the website?

I cannot find any obvious font folder for the WPB either - perhaps someone can shed light on that?

Grateful for any thoughts. Many thanks, as ever, in advance.

 

[abdi]

how I can now use that as the default font throughout the website?

I would like to help you, but I don't have a testing envrionment for that set-up. However, normally setting a font to work across the website, you would add it to the CSS file being used across all pages of your website.

What is the URL of your website, I look at the source?

 

[coolemail2]

I have PM you the URL. But with WPB, we cannot get into and amend the CSS. Or maybe we can but reverts and does not put what we have.

I have found the relevant bit of the file in /var/www/vhosts/domain.org.uk/httpdocs/css which says:

#layout-header {width: 960px;}#layout-content {width: 960px;}#layout-footer {width: 960px;}#layout {min-width: 960px;}
            #watermark {width: 960px;}
            #columns {
                padding-top: 9px;
                padding-bottom: 9px;
            }
            #column1 {
                display: block;
                width: 250px;
            }
            #column1-content {
                min-height: 350px;
            }
            #column2 {
                display: none;
                width: 200px;
            }
            #column2-content {
                min-height: 350px;
            }
            #content {
                margin-left: 259px;
                margin-right: 0px;
            }
            #content-content {
                min-height: 600px;
            }
       
        .pageContentText {font-family: "Trebuchet MS" ;font-size: 14px ;font-weight: normal;font-style: normal;}
        .pageContentText p {text-decoration: none;}
        .pageContentText h1 {font-family: "Trebuchet MS" ;font-size: 32px ;font-weight: bold;font-style: normal;text-decoration: none;}
        .pageContentText h2 {font-family: "Trebuchet MS" ;font-size: 22px ;font-weight: bold;font-style: normal;text-decoration: none;}
        body {background-color: #FFFFFF;color: black;}

but I am fairly sure that if we amend that, whenever next do an upgrade it reverts back.

 

[abdi]

You could just try adding the font record manually in the css/style.css. May be the changes you make might not be over-written. Just try it and see if they do. I haven't tested it my self since I have no testing environment.

 

[abdi]

This thread should help on how to achieve the above:
http://stackoverflow.com/questions/10041706/applying-a-single-font-to-an-entire-website-with-css

 

[coolemail2]

Sadly that link does not apply to Web Presence Builder. Has anyone had an opportunity to see if this is possible to add/use another font?

 

[dave-ha]

@coolemail2: Here might be a solution if the web font stays hosted at Typekit:

1. In the editor, put the script tag code for the Typekit-hosted font into the metadata area.
2. Add some inline CSS code to the metadata area, e.g.:

<style type="text/css">
html,body { font-family: "Omnes Pro" !important; }
</style>

Or pick the classes you need, like:

<style type="text/css">
.pageContentText,
.pageContentText h1,
.pageContentText h2 { font-family: "Omnes Pro" !important; }
</style>

Advantage:

• The font appears on the published website.

Disadvantages:

• The font is not available in any font selection menu of the editor.
  
• The font is not displayed on the pages in the editor.
• Probably, such a font can only be overridden by another font when you add "!important" in the HTML code of the text&images module.

I guess that Presence Builder would have to be enhanced to provide a fully integrated solution for other web fonts => https://wpbuilder.uservoice.com/

 

[coolemail2]

That's amazing dave-ha, thank you. I will try this and report back.

 

[dave-ha]

Good luck and touch wood