User`s Manual V 1.0
Contents
1. CA 69 D 6D 85 C0 89 56 94 09 5 If the login details are correct you will be redirected to My Project List fonts com web fonts by Monotype Imaging Home My WES account 5 My Project List CO Project ect Name Aci No project available Sele My Project List Page After you login to the Fonts com Web Fonts system you will be redirected to the My Project List page The projects added to the WordPress database are listed in the My Project List section Initially the project list page will not contain any projects You need to manually add each project that you want to use from the Fonts com Web Fonts site The projects that you have created in Fonts com Web Fonts are listed in the Import Projects section The import projects section will appear collapsed in its initial stage Here are the steps for adding the projects to the WordPress database 1 Inthe Fonts com Web Fonts projects page click the mport Projects link at the bottom fonts com web fonts by Monotype Imaging Home My WES account ss My Project List Select All None Syne More Action v C Project Name Active No project available 0 Project Name Active Select All Non Imports projects 2 After clicking mport Projects a list of projects associated with your Fonts com Web Fonts account will be listed fonts com web fonts by Monotype Imaging Home My WES account fa My Project List Selec2. Chrome and Safari will not display text in your Web fonts while editing the text in your CKEditor TINYMCE editors e CKEditor and TINYMCE use iframe in their content areas Since Web fonts need a referral to verify the domain in order to send the fonts the iframe does not send the referral when using Chrome and Safari so it won t display the external font changes e The problem above does not occur for IE and FIREFOX because these browsers send the current URL as a referrer e For better performance with the Fonts com Web Fonts WordPress plug in we recommended using the latest version of the Firefox browser Deactivating Plug in Steps for deactivating a plug in i Go to Plug ins gt Plug ins in the left hand menu ii Search for the Webfonts plug in iil Click Deactivate 20 References To learn more please visit il WordPress URL http WordPress org Description WordPress org is the official website of WordPress an open source content management platform WordPress is Web software you can use to create a beautiful website or blog Fonts com Web Fonts URL http webfonts fonts com Description Fonts com Web Fonts provides the widest selection of high quality Web fonts The site offers thousands of Web fonts from Linotype Monotype ITC and others and is the exclusive home to the celebrated Helvetica Frutiger Univers typefaces among others 21
3. E E A EEE E EA 21 Introduction The Fonts com Web Fonts plug in for the WordPress content management system CMS allows you to use Web fonts in any WordPress powered website Through this plug in users can access their Fonts com Web Fonts projects and Web fonts directly through the interface of their WordPress site This user guide explains the steps for setting up the Fonts com Web Fonts WordPress plug in and using it successfully WordPress is an open source CMS often used as a blog publishing application powered by PHP and MySQL WordPress has a templating system which includes widgets that can be rearranged without editing PHP or HTML code as well as themes that can be installed and switched between The PHP and HTML code in themes can also be edited for more advanced customizations WordPress also features integrated link management a search engine friendly clean permalink structure the ability to assign nested multiple categories to articles and support for tagging of posts and articles Automatic filters that provide for proper formatting and styling of text in articles for example converting regular quotes to smart quotes are also included WordPress also supports the Trackback and Pingback standards for displaying links to other sites that have themselves been linked to a post or article Finally WordPress has a rich plug in architecture which allows users and developers to extend its functionality beyond the features t
4. Here is the screen shot of TinyMCE using WFS project fonts also eel Eee HA RE ee Webfonts from WFS bachon Bold Gill Sans Medium account ee DIN Next Medium Egyptian 505 Medium Path p fh A Web font in use in a text editor AAceeoaceene This is an aachen bole Aachen Bold font used in tinymce Path p span y Font Dropdown Menu There are two types of fonts displayed in the font drop down menu a Web Fonts from your Fonts com Web Fonts account The Web fonts in the font dropdown menu will display fonts from the active project enabled from the project configure tab This is a dynamic listing The online editor will populate the list of available Web fonts in the menu each time it is accessed b Default fonts This is a set of commonly available fonts provided by CKEditor TinyMCE Considerations when using Web Fonts in a WordPress WYSIWYG EDITOR e Verify that you are using either the CKEditor or TINYMCE editor e Do not activate multiple editor plug ins in WordPress e Make sure the project has been activated and properly configured to ensure your Web fonts display on your website 19 NOTE e WYSIWYG editors rely on JavaScript Performance of these editors is partially dependent upon your browsers compatibility with JavaScript and these editors e Enabling CKEditor TINYMCE will replace the text created with CKEditor TINYMCE in all browsers However some browsers such as
5. Sans Medium Monotype Imaging a SaveEditorFonts 15 Online WYSIWYG editor Non Admin Admin WordPress existing selectors The WordPress existing selectors display the list of selectors used by the current WordPress theme Users can add these selectors to their projects with one click Font Wordpress existing selectors Wordpress Existing Selector html Add to webfonts body Add to webfonts div Add to webfonts span Add to webfonts applet Add to webfonts object Add to webfonts iframe Add to webfonts To add the WordPress existing selectors to your Fonts com Web Fonts project click the corresponding Add to Web Fonts link Domain tab The domain tab allows users to e Display a list of domains associated with the selected projects e Add domains to a project Domain The domain section lists all the domains associated with that project Here you can edit or remove domains to and from your Fonts com Web Fonts projects directly through the plug in Domains thewebfonts com Edit Remove localhost Edit Remove Editing Domain Here are the steps for editing a domain Step 1 Click Edit Step 2 The domain editing screen appears Change the name of the domain and click Submit To return to the previous screen click Cancel 16 nE Is Ss Edit Project for Plugin Demo Project Edit Domain www test com Save Delete Domain To delete the domain click Remove next to the cor
6. fonts to the selectors 13 Step 1 Select the font from the drop down menu for each corresponding selector Step 2 Click Save Selectors i Quick Brown Fox Jumped Over The Lazy Dog pamate Quick Brown Fox Jumped Over The Lazy Dog Remove e neend Quick Brown Fox Jumped Over The Lazy Dog PERE CE Quick Brown Fox Jumped Over The Lazy Dog papige 1 2 Next Last Add Selector Deleting the selector To delete the selector click on the corresponding remove link This will delete the selector from the project The selector will also be deleted from your Fonts com Web Fonts account Add Selectors The add selectors control allows you to add new selectors to the existing project without visiting the Fonts com Web Fonts site Instead new selectors can be added directly through the plug in Add Selector Here are the steps for adding the selectors Step 1 Type the name of the selector you want to add The selectors name should be same as the ones used in your CSS Add Selector newid _ Add Step 2 Click Add After clicking Add the loading screen will appear in the selectors listing area Selectors a Save Add Selector newid add Sevesenscesved 14 Step 3 The new selectors will be displayed in the selectors listing section Selectors ian Aachen Bold z Quick Brown Fox Jumped Over The Lazy Dog id2 Aachen Bold x Quick Brown Fox Jumped Over The Lazy Dog newid Please sele
7. b fonts please make sure your Web Font Project has the fonts selected and has the corresponding Selectors Show on every page except listed page leave blank to show on all pages Show on only listed pages Page List is front page is home is page is single is archive HOBOOS is 404 Use this option if you want to use Web fonts on only a few of your pages Following these steps 11 Step 1 Select the Show on only the listed page checkbox Step 2 Check the checkbox of the corresponding pages that you want to display using Web fonts Step 3 Click Save at the bottom of the page Days selection The day selection field allows you to specify the days that Web fonts will be used on your WordPress projects If you have multiple projects activated you can specify different days for each project When using this control O represents Sunday and 6 represents Saturday Use a hyphen to specify a date range For example use 0 4 to activate your Web fonts from Sunday to Thursday Be sure to enter a value into this field If the field is left blank Web fonts will not display on your website on any day Display for day of week 0 6 0 for Sunday 1 for Monday and 6 for Saturday use for day range eg 0 6 for displaying from Sunday to Saturday you can also use comma separate days eqg 1 3 4 for displaying on Monday Wednesday and Thrusday Publish Code options The Fonts com Web Fonts publish code option can be used on the
8. ct a font v classi DIN Next Medium Newly ped Over The Lazy Dog add selector Step 4 Select the font for the newly added selectors and click Save Selectors id1 Aachen Bold Quick Brown Fox Jumped Over The Lazy Dog id2 Aachen Bold Quick Brown Fox Jumped Over The Lazy Dog newid Egyptian 505 Medium Quick Brown Fox Jumped Over The Lazy Dog classi DIN Next Medium Quick Brown Fox Jumped Over The Lazy Dog 1 2 Next Last Fonts Remove Remove Remove Remove Remove Remove Remove Remove The Fonts section displays the list of fonts associated with the current project Checkbox options are used for selecting Web fonts for use within the non admin frontend and admin section editors If you select the Non Admin checkbox the corresponding font will display in the frontend editor only If you select Admin the corresponding font will display in the admin editor only If both options are selected the font will display through frontend and backend editors Fonts Wordpress existing selectors Fonts Preview Quick Brown Fox Jumped Over The Lazy Dog Egyptian 505 Medium Monotype Imaging HESABUCUMO OT AS3SbiIKa Gill Sans Medium Monotype Imaging Quick Brown Fox Jumped Over The Lazy Dog 4achen Bold Monotype Imaging Quick Brown Fox Jumped Over The Lazy Dog DIN Next Medium Monotype Imaging Quick Brown Fox Jumped Over The Lazy Dog Gill
9. e My WFS account A My Account Web Fonts Info You must be the member of webfonts fonts com to use the plugin If you have not registered yet please sign up here Please provide your user detail from webfonts fonts com Authenticate key token I 2 Use the API token key generated for your WFS account for login To get your authentication key login to webfonts fonts com then navigate to My account gt Account summary 3 Enter the generated API key in text box Click on save configuration fonts cOM web fonts by Monotype Imaging i Home My WFS account 2 My Account Web Fonts Info You must be the member of webfonts fonts com to use the plugin If you have not registered yet please sign up here Please provide your user detail from webfonts fonts com Authenticate key token 90355 132 9d83 452b a26b 043a84e6cd85 afa3358 1 923f 40d1 ba10 29611dff8723F9 34 86 BF FF 38 C4 69 D7 6D 85 C0 89 56 94 09 Sign Up Reset Configuration In the case of an authentication failure the following screen will appear fonts cOM web fonts by Monotype Imaging B My Account Invalid Authentication Home My WES account You must be the member of webfonts fonts com to use the plugin If you have not registered yet please sign up here Please provide your user detail from webfonts fonts com Authenticate key token 90355 132 9d83 452b a26b 043a84e6cd85 afa3358 1 923f 40d1 ba10 29611dff8723F9 34 86 BF FF 38
10. fonts com by Monotype Imaging Fonts com Fonts com Web Fonts WordPress Plug in User Guide Monotype Imaging Updated October 19 2010 Contents O TUN sera ce paige E dupe cies ae a eras ates sents E E ieee nee E E E 2 Requirements for using the Fonts com Web Fonts Plug in cccccccsssecceeeseceeeeescceeeesececeuseceeeeeeceeseneeeeas 3 MY Fie y OUIG CG ia E A E E 3 Setting up the Fonts com Web Fonts Plug in in WOrdPIess cccccsseccccssecccceseccceesececeeneceeeeeseeesensecetseneess 4 Fonts com Web Fonts account CONFIQUrATION cccccccesseccceesecccceusececaeseceeeesececeeeecceseusecessugecetsuneceesenneeetas 5 PEM CTI EKETE A R E EE E E E I E E E E EE 5 VIVRE ECCLE POBE aia S 7 MOE ACION meena a on nen mma ne Oe eee ne eee eee 8 Proe DG Ca PS icra sicewra nae cateuntese E nes enuoanucetssandssevsenies uagacaseunarecueenensosenneresstt 10 TUN a a nn ga ects wontons acetic aes A E eee aesees 10 MOI On Cy SS OE UA ccc et crrssctz sents cecrrs essere eae ease E E E 13 DO U CAD er tonncteve xaervendonuedevseun soit trataereureetiessauneaeduund anol sida staveesae vende tevdsinesanitnasteronine 16 Fonts com Web Fonts Plug in and WYSIWYG editor ccccccsssccccesseccceesececeeeseceeseecesseaecesseneecetausecetseneces 18 OIE OC O WY IVAN ers EE 19 Deactivating the Fonts com Web Fonts PIUG iN ccccccsseccccesseccceesececcenecccceescceeeusececeunecesseeeceessuecesseneees 20 PREF FSC E PE EEN A E EEE EE
11. from your Web Font Project See online editor with webfonts Enabling client system fonts for use within the WYSIWYG editor This option allows client system fonts to be used within the editor If you select the Admin only option only the system fonts of administrators will display in the editor If you select Front end only then it will display system fonts in the front end editor only If you select Both then it will display system fonts on both frontend and backend editor And if you select None system fonts will not display in either the front end or back end Work on Style sheet tab This tab consists of the following settings Display the list of fonts associated with the project e Display the list of selectors associated with the project e Display the font associated with each selector e Display the list of selectors used by the current WordPress theme e Add Delete selectors Selectors The selectors section displays the list of selectors associated with the project It displays the selector s name the font name associated with the selector the preview text and a remove link to delete the selector Selectors eat Gill Sans Medium 4 Quick Brown Fox Jumped Over The Lazy Dog a Aachen Bold x Quick Brown Fox Jumped Over The Lazy Dog classi DIN Next Medium x Quick Brown Fox Jumped Over The Lazy Dog itii cass Egyptian 505 Medium 4 Quick Brown Fox Jumped Over The Lazy Dog pui 1A es a Steps for assigning
12. hat come as part of the base install Requirements for using the Fonts com Web Fonts WordPress Plug in What You Need To use the Fonts com Web Fonts Plug in on your website you will need A Fonts com Web Fonts account To create a Fonts com Web Fonts account visit http webfonts fonts com A project within your Fonts com Web Fonts account that your domain has been added to The domain of your WordPress based website will need to be added any project that you wish to use the module with Your Fonts com Web Fonts authentication key To get your authentication key login to webfonts fonts com then navigate to My account gt Account summary A WordPress based website JavaScript enabled in your browser Setting up the Fonts com Web Fonts WordPress Plug in Steps for setting up the Fonts com Web Fonts Plug in in WordPress Download the latest version of the Fonts com Web Fonts Plug in from the site The plug in is available in two formats XML and JSON e Goto the WordPress admin area e Navigate to Plug ins gt Add New in the left side menu e Click the Upload link e Upload the plug in in zip format and click Install e Click Activate to activate the plug in Fonts com Web Fonts Account Configuration Authentication 1 When you click the Fonts com Web Fonts menu located at the bottom left corner the first screen that will appear is the Web Fonts authentication page fonts cOM web fonts by Monotype Imaging i Hom
13. project listing table Step 3 Click the Delete option Select All None Syne More Action v C Project Name Active E Plugin Demo Project 7 E xyz Crop Project x C Project Name Active NOTE Deleting a project here only removes it from your WordPress database It does not remove the project from your Fonts com Web Fonts account Sync The purpose of the Sync option is to display a current listing of Fonts com Web Fonts projects that have been added to the WordPress database To use the sync option simply click the sync button Selecting a project checkbox will not impact the synchronization Projects synchronized successfully Home My WFS Account 2 My Project List Select All None More Actions Y Sync oO Project Name Active ABC company oil project x O ABC company game department 74 Other options Select All Used to select all checkboxes at once None Used to deselect any selected checkboxes Project Details Page When you click on a project in the project listing page you will be redirected to its Project Detail page The Project Detail page is comprised of the Configure Work on Style Sheet and Domain tabs Configure tab The configure tab handles the configuration of the Fonts com Web Fonts projects in WordPress Here are the configuration settings you can choose with configuration tabs e Change the page visibility options e Choose the day you want to use the cur
14. rent project e Select the JavaScript or non JavaScript publishing method Non JavaScript publishing method is available exclusively for Standard and Professional plan subscribers e Choose either TinyMCE or CKEditor as the default editor 10 e Enable or disable the WYSIWYG editor Page Display settings The page display settings enable the use of the Fonts com Web Fonts Plug in on the front end of a WordPress based website Based on the selection the plug in output will be reflected on the website front end There are two options to choose from 1 Show on every page except the listed page leave blank to show on all pages Page Display Setting You can select the pages to display web fonts please make sure your Web Font Project has the fonts selected and has the corresponding Selectors Show on every page except listed page leave blank to show on all pages Show on only listed pages Page List E is front page O is home EO is page E is single O is archive E is 404 Use this option if you want to use Web fonts on all or most pages of your website Follow these steps Step 1 Select the Show on every page except listed page leave blank to show on all pages Step 2 Check the box of the corresponding pages for which you don t want to display using Web fonts Step 3 Click Save at the bottom of the page 2 Show on only the listed page Page Display Setting You can select the pages to display we
15. responding domain Add Domain The Add Domain control allows you to add new domains to an existing project so that users do not have to exit the WordPress interface and visit the Fonts com Web Fonts website Add Domain add Www xyz com Here are the steps for adding a new domain Step 1 Type the name of the domain you want to add and click Add Add Domain Www yz com Step 2 After you click Add the loading screen will appear in the domain listing area Domains ZE Add Domain www xyz com Step 3 The newly added domain will be listed in the Domain area Domains www xyz com thewebfonts com localhost 17 Fonts com Web Fonts Plug in and WYSIWYG editor To use your Web fonts within a WYSIWYG editor in WordPress the projects must be activated Once a project is activated the Web fonts associated with that project will display in your WYSIWYG editor s font menu in WordPress In this release the font listing in WYSIWYG editor is only compatible for CKEditor and TinyMCE This screen shot shows CKEditor using Web fonts Gsue HOR A dRea 258 4 62 Be or aommibaasa 8AP B0nES oE BS E Ca CE Aachen Bold Web Fonts streamed from WFS for Gill Sans Medium Andy Bold DIN Next Medium currently activated project Using the font in text editor El source MOR deaa asm o gt He Manae man o fee eere ae a Aachen Bold font used in CKEDITOR 18
16. site with either JavaScript or non JavaScript methods This option will only be visible to subscribers of Standard and Professional plans Free plan subscribers will not see this option To specify a publishing method make your selection and click Save Source Type Please select the option to be used Javscript Stylesheet Web Fonts Editor Option The Web Fonts Editor option lets you use your Web fonts in a WYSIWYG editor It also lets you set either TinyMCE or CKEditor as the default editor in WordPress Enabling this option allows you to select the fonts from the WYSIWYG editor s fonts dropdown menu If you have activated multiple Fonts com Web Fonts projects the editor will only display fonts from the most recently activated project If you plan to use TinyMCE make sure the TinyMCE radio button is selected even if TinyMCE is already set as your default Wordpress editor If you are using TinyMCE and the CKEditor button is selected your Web fonts will not be accessible in the editor Since WordPress uses TinyMCE as its default editor we recommend using TinyMCE for better compatibility 12 Webfonts Editor Option Please select the editor to be use TinyMCE Ckeditor Enable client system fonts for WYSIWYG editor Admin only Front end only Both None Please deactivate other module that replaces editor in the wordpress before enabling the editor E Enable the online editor with web fonts
17. t All None Syne More Action ly C Project Name Active No project available C Project Name Active Select All None Imports projects O Plugin Demo Project O xyz Crop Project 0 Example Project E ABC Demo Project Refresh Import Project 3 Click on the pagination link to proceed to next page Imports projects O WordPress Sample Project First Previous 1 2 Refresh Import Project 4 Check the project s that you want to use and click the mport Project button Imports projects Plugin Demo Project V XYZ Crop Project E Example Project F 4BC Demo Project Refresh Import Project Refresh List Button Clicking the Refresh List button will refresh the list of Projects from Fonts com Web Fonts 5 After clicking Import Project the project will be added to the WordPress database and the added project will be listed in the project list section F a My Project List Select All None Sync More Action vw C Project Name Active E xYZ Crop Project E Plugin Demo Project x C Project Name Active More Actions Select All None Sync More Action Y i Activate C Project Name Doactivat F Plugin Demo Project Delete Activate In order for the Web fonts in a Fonts com Web Fonts project to display on your website a project needs to be activated If the project is not ac
18. tivated the Web fonts will not display on your website The Active column shows which projects have been activated A check sign indicates activated projects and an X indicates deactivated projects Follow these steps to activate a project Step 1 Make sure you have imported the project to the WordPress database Step 2 Select the projects you want to activate Step 3 Click More Action on the top of the project listing table Step 4 Click the Activate option Select All None Syne More Acn v Activate Deactivate C Project Name Active Plugin Demo Project Delete 7 x E XYZ Crop Project x C Project Name Active Once a project has been activated a checkbox appears next to the project name Select All None Sync More Action v Project Name Active oO p aa Project activated P E xyz Crop Project status display x C Project Name Active Deactivate The deactivate option allows you to deactivate any currently activated projects Follow these steps to deactivate a project Step 1 Select the projects that you want to deactivate Step 2 Click the More Action option at the top of the project listing table Step 3 Click the Deactivate option Delete The delete option allows you to delete projects from the WordPress database Follow these steps to delete a project Step 1 Select the projects you want to delete Step 2 Click the More Action option on the top of the
Download Pdf Manuals
Related Search