Important Update
Web-safe fonts give you total control and certainty that your web app – and now your WPF desktop app – will visually render exactly according to your design specifications. Now that AngularJS and Node.js and other tools are making it possible to create Single Page Applications which function like desktop apps, the distinction between desktop apps and web apps is blurred in a positive way, especially from the user’s point of view.
In fact, as more and more content migrates to Cloud, online resources provide a more consistent and reliable user experience. Increasingly, developers want to style a desktop app to mimic a web app UI, and conversely to render a desktop app UI with the same certainty as a web app by using web-safe fonts, and especially Google Web Fonts.
When an enterprise has both web and desktop-based products there is a natural need to maintain brand recognition through visual consistency across all products, and the font face is an important factor in achieving this goal.
Until recently, desktop apps relied on installed fonts on the local device, but now you can add Google Fonts to WPF and other desktop apps to ensure accurate compliance with design specs on all OS and display types. Here are some of the critical issues around rendering text equally in web and desktop apps:
With special emphasis on this last item, regarding SEO and page ranking, a great benefit of using web fonts as a standard across enterprise desktop and web apps is the elimination of jpg image headlines and other image-based text which hides important SEO keywords and affects page rank.
When using Google Web Fonts, all text and key phrases on a page is searchable and index friendly. ALT tags are no longer needed to lead search engine crawlers, and the code is lighter as a result. All such issues are addressed and resolved cleanly by using web-safe fonts both in SPAs and desktop apps.
Among the potential disadvantages of using web fonts, performance is a two-edged sword. Web fonts can reduce page load time because of the call to a server to fetch the font, and this is an issue outside the control of the developer once the decision is made to deploy web fonts.
Cache Validator errors are also a possibility when Google PageSpeed tests the site. “Expire Header” errors are also possible with Yahoo YSlow resulting from external server access. The next step is to understand how to use web fonts, and in particular, the best Google web fonts to produce consistently great text effects.
Among the myriad devices including desktops, tablets, and phones, each has a unique set of pre-installed fonts, and the selection is often determined by the operating system and manufacturer. MacOS, Windows, and Android differ in their standard pre-installed fonts.
When a device renders a web page, if the specified font is not available, then the browser will render the page with a backup font. If the developer chooses a font that is not available on a device then the browser might render the text with Times New Roman as a backup.
The result is likely to have undesired effects of image overflow or an unappealing appearance. This problem is naturally and ideally solved by using web-safe fonts, including the nearly 900 unique Google Web Fonts, because the fonts are URI based rather than being located on a local machine.
A font specified in CSS loads from the base URI at the time a page loads and renders exactly the same on every device. How does it work, and how can we use this great resource on WPF and other desktop apps too? We will answer this with examples and demonstrate how to apply the best Google Web Fonts in desktop apps as well.
Google Web Fonts are 100% Open Source and according to Google, you are free to share, customize, and use them in any manner both privately and commercially. To get started with Google Fonts, open the Google Fonts website, and select one or more fonts to add to your collection. To the right of each font title, click the red plus sign, and you will see the font name added to the black overlay tab at page bottom. For this intro we have selected the Titan One font:
Note the drop-down menus for selecting style and size attributes. Now, to expose the code we need for using the Titan One font in our CSS, click the black overlay tab to expand it. To embed this Google font in your CSS stylesheet simply use your editor to add this line to your style:
<link href="https://fonts.googleapis.com/css?family=Titan+One" rel="stylesheet">
Add the following CSS rules to apply this font family:
font-family: 'Titan One', cursive;
You can also download the file and then upload the Google Font to your own server using the following code:
<style>
@import url('https://fonts.googleapis.com/css?family=Titan+One');
</style>
You can select as many fonts as you need and add them to your collection.
Downloaded and installed apps have less trouble maintaining consistency but the ability to install a font on any target machine still contains surprise issues and uncertainties. Although fonts can be added as needed when a desktop app or mobile app is downloaded and installed, developers cannot always guarantee that a device will allow the action during installation and setup.
Web fonts eliminate this problem and also ensure that random backup fonts will not be chosen ad hoc on a local user’s device. Now, the beauty of this universal Google Font Family is that you can apply any style you like and be absolutely certain of accurate rendering and display on all devices and OS platforms. Styles like this:
Can now be used freely on any app, device, or OS. Add this font to your CSS as:
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Questrial" rel="stylesheet">
There are several ways to use Google Fonts with desktop apps and mobile apps, just as with web apps. It is possible to download the entire 700Mb collection from Google for use on your local machine. For this task, you may want to use a web scraper or site mirror tool. Or, you can just choose individual fonts needed for your project. Be aware that downloading a Google Font and adding it straight to a stylesheet can lead to the same old problem where other users of your app may not have that particular font on their local machine.
One great way developers can use Google Fonts is to match the type styles of user interfaces and websites with existing applications. An issue arises when you cannot require a user to install a font in the event that it is not available by default on a platform like Windows Presentation Foundation – WPF. Let’s explore how to make WPF use font definitions which are available from Google Web Fonts so that requiring users to install fonts is not necessary.
To guarantee that all end-users see the same font style and that your UI renders the same across all displays, download the font as needed or on-demand in your code by setting the FontFamily property of an element or container to the constructor that takes a URI as an argument and uses the URI of the Google Font desired.
You may also download the font on demand in your script by setting the FontFamily property of an element or container to a new FontFamily object. In this method, use the constructor that takes a URI and use the URI of the Google Font.
As in the examples above, you may also select fonts and add them to your collection. Next, click the link, “Download Your Collection” which will create a zip file to download locally. You will need to embed the required fonts as a resource in the WPF application.
Add all the files to your project, and make sure to configure the compile action as a “Resource.” From this point, the fonts can be used in XAML by designating the Font Family property as the resource name instead of the font name.
One of the great benefits of Google Web Fonts is that it helps developers escape font file license restrictions. Most font licenses, including those issued with Microsoft fonts, prohibit their fonts from being embedded within apps and redistributed. Fortunately, all Google Web Fonts are free for distribution commercially. Therefore, developers can write WPF apps using Google Fonts completely without license restrictions!
Packaging fonts as resources within a WPF application are easy. WPF font rendering can be achieved with a modicum of effort. Fonts can be separated from the app’s assembly files or embedded in them. Resource-only font libraries are a convenient way to manage fonts for reference by your WPF applications. For this purpose, you can ignore “font embedding rights,” because Google Web Fonts are free to share and distribute.
Let’s use the following method to add fonts to a WPF application as project content items that are separate from assembly files. So, these content items are not embedded as resources within the assembly. Here is how to define content items in your code:
<Project DefaultTargets="Build"
xmlns="http://schemas.microsoft.com/developer/msbuild/2010">
<!-- Place other build settings here ... -->
<ThisItemGroup>
<Content Include="TitanOne.ttf" />
<Content Include="DancingScript.ttf" />
</ThisItemGroup>
</Project>
Then, ensure that the fonts are available to the application at runtime, place the fonts in the app’s deployment folder. <CopyToOutputDirectory> is the element in the app’s project directory that supports copying the fonts to the app’s deployment directory during builds. And here is a sample XML that shows how to copy fonts to the deployment directory:
<ThisItemGroup>
<Content Include="TitanOne.ttf">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="TitanOne.ttf">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
</ItemGroup>
And the next example demonstrates how to reference your app’s font as a content item. Keep in mind that the referenced content item needs to be in the same directory as your app’s assembly files. Here’s the code:
<TextBlock FontFamily="./#Titan One"> Rise of Neptune </TextBlock>
Here we will demonstrate how to add fonts to an app as project resource items so that they are embedded in the app’s assembly files. Ideally, use a unique and separate subdirectory for resources to clearly organize the app’s project files. Here’s how to define fonts as resource items in their own subdirectory:
<Project DefaultTargets="Build"
xmlns="http://schemas.microsoft.com/developer/msbuild/2010">
<!-- Include build settings here ... -->
<ThisItemGroup>
<Resource Include="resources\TitanOne.ttf" />
<Resource Include="resources\DancingScript.ttf" />
</ThisItemGroup>
</Project>
To reinforce a previous distinction here, be sure to set the element<Resource> – not the element<EmbeddedResource> – in your app’s project file when adding fonts as resources. <EmbeddedResource> as an element for builds is not supported. And here is the code which shows how to reference the app’s font resources:
<TextBlock FontFamily="./resources/#Titan One”> Rise of Neptune </TextBlock>
Be sure to put both application content and all resource files within a unique user-configured subdirectory as part of your app project. Here is the code to demo a content page and two font resources defined in the same subdirectory:
<ThisItemGroup> <Page Include="pages\HomePage.xaml" /> </ThisItemGroup> <ThisItemGroup> <Resource Include="pages\TitanOne.ttf" /> <Resource Include="pages\DancingScript.ttf" /> </ThisItemGroup>
Enumerate fonts as resource items in an app by using the GetFontFamilies or GetTypefaces methods. Here is how to use the GetFontFamilies method to return the collection of FontFamily objects from the app font folder. Here, the application contains a subdirectory named “resources”:
foreach (FontFamily fontFamily in Fonts.GetFontFamilies(new Uri("pack://application:,,,/"), "./resources/"))
{
// do an action here
}
It may also be beneficial to create a resource-only library containing only the fonts for a project. The creation of resource-only libraries is a great method for decoupling resources from application code for the organization. Furthermore, the library assembly can be included with multiple application projects.
Google font styles free developers from the old hassles of trying to anticipate all possibilities on machines they have no access to and trying to manipulate systems remotely to maintain the aesthetics and visual appeal of their apps. This is not strictly a superficial concern because especially in embedded systems, a font overflowing a button can seriously affect the actual functionality of the system – in some cases breaking modules.
The ability to guarantee font availability across all systems at long last resolves this long-standing issue of local machine resource availability.
The benefits of using Google Web Fonts are outstanding. Consistency in UI presentation is very important to your brand recognition. Apps that have coordinated visual rendering across all user devices achieve a higher level of recognition.
Google Web Fonts in conjunction with platforms like WPF are now removing obstacles such as local font availability. Synonymous with brand recognition is the underlying SEO rank. Strategies using web-safe fonts can increase page rank across search engines and this directly improves desktop product visibility.
About the Author
ByteScout Team of Writers
ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.
The Blockchain industry is a rapidly evolving space with the development of new technologies, techniques, and platforms almost every other day. So, keeping pace with...
Medical advancements have always impacted the world and ultimately lead to massive changes in the health and well being of individuals. For instance, in 1796 ...