Using Web Fonts

1. If a font that I’m using on my website has characters added to it or is updated in any way, how can I access the new data?

2. Do Latin extended fonts contain the characters in the basic Latin?

3. Is the font data hinted?

4. Does the same font file need to be downloaded for each pageview within a visitor session?

5. Will my fonts look different depending on the browser and operating systems of the website visitor?

6. Is the font data protected?

7. I’m a beginner and have no experience. Can someone help me get started?

8. How do you calculate the page views for the “Pay as you go” license model?

9. Will using Web fonts increase the size of my Web pages?

10. How do I use my Web fonts on a secure (SSL enabled) page?

11. How do I self-host my Web Fonts?

12. How Do I Use Linotype.com Web Fonts with Magento?

13. How Do I Use Linotype.com Web Fonts with Joomla!?

14. How Do I Use Linotype.com Web Fonts with Shopify?

15. How Do I Use Linotype.com Web Fonts with WordPress?

16. How Do I Use Linotype.com Web Fonts with Squarespace?


1. If a font that I’m using on my website has characters added to it or is updated in any way, how can I access the new data?
You can simply redownload the fonts through your account. As a rule, the package will contain the most up-to-date version of a font.


2. Do Latin extended fonts contain the characters in the basic Latin?
Yes. Our extended language Web fonts include supplemental language characters and a full basic Latin-1 character set.


3. Is the font data hinted?
All of our Web fonts have been reviewed by Monotype’s font engineering and quality assurance teams. Font rendering quality varies depending on the operating system and browser combination in use by the website visitor. Using a combination of proprietary font optimization tools and hinting strategies, we work to achieve the best possible results at every point size and across every operating system and browser combination. Many of our Web fonts have been designed specifically with screen display in mind. Monotype is committed to innovating new ways to maximize on-screen rendering quality while minimizing file size. As quality and size improvements are made, Web font data will be updated automatically, meaning your site’s fonts will always look and perform their best.


4. Does the same font file need to be downloaded for each pageview within a visitor session?
No, assuming default browser settings, each unique font file will be downloaded once per user session. If the user sets the browser to not load any data in the cache, then the font file may need to be downloaded with each pageview.


5. Will my fonts look different depending on the browser and operating systems of the website visitor?
Due to different rendering methods of browsers, fonts may appear slightly differently from one browser to another.


6. Is the font data protected?
You are responsible for making sure that the font software is used in compliance with the End User License Agreement. However, the font data is protected from tampering and theft in a number of ways. Font file names are obfuscated and, when possible, fonts will be delivered in EOT or WOFF formats. At the conclusion of a users visit to your website, the fonts are removed from their browser’s temporary cache.


7. I’m a beginner and have no experience. Can someone help me get started?
For detailed answers to additional questions, visit our FAQ section on the subject of Web fonts. You will also find more information on the subject of Web fonts in our font technology article Web fonts from Linotype.com.


8. How are pageviews calculated?
Every time that a page using our Web fonts is viewed, it is recorded as a single pageview. In order to ensure that we are providing the most complete data, pageview information is updated daily.


9. Will using Web fonts increase the size of my Web pages?
In order to display on a visitor’s machine, a Web font must be downloaded – just like images or other elements on your site. However, font files are relatively small in size. On average, our Latin fonts range from 40–50 KB in size. Depending on user settings browsers may cache Web fonts. This means that if Web fonts are used on multiple pages, the font files are only downloaded in the first instance they are viewed, not for subsequent pages which use the same fonts.


10. How do I use my Web fonts on a secure (SSL enabled) page?
To use Web fonts on a secure page, simply make them available through https on your server as well.


11. How do I self-host my Web Fonts?
First, download your Web fonts kit from the "Previous Orders" section of your account. The downloaded kit contains the following files and folders:

Fonts/ – This folder contains each of the fonts in your project in the EOT, TTF, and WOFF formats
demo.htm – This is a sample HTML file for your fonts with the @import page-view tracking method
demo.css – This is a sample CSS file to accompany the demo.html file; it can be used to replace the STYLE tag with the @font-face rules with a LINK tag
demo-async.htm – This is a sample HTML file for your fonts with an asynchronous JavaScript page-view tracking method
demo-async.css – This is a sample CSS file to accompany the demo-async.html file; it can be used to replace the STYLE tag with the @font-face rules with a LINK tag

Both page-view tracking methods work by making a request to an empty CSS file on our CDN when the visitor’s browser loads the page; the difference is in how that request is executed. With the sample HTML files, please be sure to read the contained information. Hosting our Web fonts on your own servers requires that you place reasonable security measures on them to prevent improper use. This generally includes the following:

Keep the web font file names obfuscated (as they are provided, the provided sample CSS maps all the fonts to the correct files)
Implement measures so that visitors may not easily download the web font files by simply typing the font file’s URL into their browser (or by something like a basic wget command)
Implement measures to that other web sites cannot "hot-link" to the font files hosted on your servers

Next, choose your page-view tracking method (CSS @import or asynchronous JavaScript) and upload the appropriate files as well as the fonts to your server. Be advised that uploading the Fonts folder to a location other than that referenced in the HTML/CSS will require that you adjust the paths in the CSS @font-face rules to match.

Finally, take any final steps that may be necessary for your server configuration to properly deliver the hosted font files to your site. This will often include configuring your server in these two areas:

Cross-Origin Resource Sharing policies

Depending on your setup, you may need to configure your server to include a valid "access-control-allow-origin" response header to ensure the Web fonts work correctly in certain browsers. More information can be viewed at these links:
Mozilla Developer Network
W3C Cross-Origin Resource Sharing
Configuring MIME Types

Some environments, commonly IIS-based, will not have MIME types configured for some or all of the web font file formats pre-configured and they will have to be manually added to the configuration. We recommend delivering each web font file format with the MIME type "application/octet-stream" to ensure compatibility with all possible browsers.


12. How Do I Use Linotype.com Web Fonts with Magento?
The instructions below, based on Magento 1.9, demonstrates the basic steps to be able to include Linotype.com web fonts into your Magento website.

1.Extract the demo.css file and Fonts folder from the web font kit ZIP file
2.In your Magento installation folder, find the CSS file for your skin
3.Upload the contents of the kit to this folder
4. Sign into your Magento Admin Panel
5. In the System menu, choose Configuration
6. Under the General heading in the side menu, choose Design
7. Click into the HTML Head section
8. In the textbox next to Miscellaneous Scripts, insert a LINK tag to the demo.css file
9. Click the Save Config button

It is important to note that, depending on the skin being used, the exact path used in steps #2 and #8 will vary. You can optionally rename the demo.css file to something more descriptive such as fonts.css. If you do, be sure to make sure that change is reflected in step #8 when adding a reference to it.


13. How Do I Use Linotype.com Web Fonts with Joomla!?
To be able to include a Fonts.com project into your Joomla! website:

1.Extract the demo.css file and Fonts folder from the web font kit ZIP file
2.In your Joomla! installation folder, navigate to the “css” folder of the template you’re currently using (e.g. templates//css)
3.Upload the contents of the kit to this folder
4. Sign into your Joomla! Control Panel
5. Click Template Manager
6. In the sidebar, click Templates
7. Click on the template you’re currently using
8. In the sidebar, click index.php
9. Scroll to the section that includes stylesheets and add this into a new line:
$doc->addStyleSheet($this->baseurl . '/templates/' . $this- >template . '/css/demo.css');
10. Click the Save button

You can optionally rename the demo.css file to something more descriptive such as fonts.css. If you do, be sure to make sure that change is reflected in step #9 when adding a reference to it. The ideal file/location to add the line in step #9 may vary from template to template.


14. How Do I Use Linotype.com Web Fonts with Shopify?
The instructions below demonstrate the basic steps to be able to include Linotype.com web fonts into your Shopify website.

1.Extract the demo.css file and Fonts folder from the web font kit ZIP file
2.Open the demo.css file in a text editor
3.Delete "Fonts/######/" from all of the url() blocks (where "######" is a short series of numbers followed by ’/’)
Example: url("Fonts/884210/43e026a9-aa90-4d6a-85a9-6735ad285c96.eot?#iefix")
… would become …
url("43e026a9-aa90-4d6a-85a9-6735ad285c96.eot?#iefix")
4. Sign into your Shopify account
5. Click Online Store in the left menu
6. Click Themes in the left submenu
7. Click Customize Theme in the top-right
8. Click Theme options in the top-left of the page and then click Edit HTML/CSS
9. In the Assets folder, click Add a new asset
10. Use the browse button to select one of the web font files in the Fonts folder’s sub-folders extracted during Step #1
11. Repeat Steps 9-10 until all of the web font files from this folder’s sub-folders have been uploaded
12. Click Add a new asset once more
13. Upload the demo.css file extracted and modified in Steps 1-4
14. Click theme.liquid in the Layout folder
15. Somewhere in between the <head> and </head> tags of this file, insert this line of code:
{{ "demo.css" | asset_url | stylesheet_tag }}
16. Click the Save button in the top-right
You can optionally rename the demo.css file to something more descriptive such as fonts.css. If you do, be sure to make sure that change is reflected in Step 15 when adding a reference to it.


15. How Do I Use Linotype.com Web Fonts with WordPress?
Notice: If you are using WordPress.com to host your WordPress site then unfortunately there are restrictions in place that make it impossible to use our Linotype.com web fonts. The instructions below, based on WordPress 4.2, demonstrate the basic steps to be able to include Linotype.com web fonts into your WordPress website.

1.Extract the demo.css file and Fonts folder from the web font kit ZIP file
2.In your WordPress installation folder, locate the css folder for the theme you’re currently using
Example: wp-content/themes/twentyfifteen/css/
3. Upload the demo.css file and Fonts folder from Step #1 into this folder
4. Sign into your WordPress admin
5. Under the Appearance section, click Editor.
6. In the file list on the right-hand side, choose “Header (header.php)”
7. In between the <head> and </head> tags, add a new line with this tag:
<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/demo.css">
8. Click Update File.
You can optionally rename the demo.css file to something more descriptive such as fonts.css. If you do, be sure to make sure that change is reflected in Step #7 when adding a reference to it.


16. How Do I Use Linotype.com Web Fonts with Squarespace?
It is possible to use Linotype.com web fonts in Squarespace websites through the use of Squarespace’s Developer Platform which is currently available through their Business and Commerce plans. The following steps will show let you know how to add your Linotype.com web fonts to your Squarespace website.

Requirements
Developer Mode enabled in your website
A text editor (Notepad on Windows, TextEdit on Mac)
An FTP application that supports SFTP

How to
1.Go to your Squarespace account Home
2.Choose Settings, then Advanced then Developer Mode
3.Enable Developer Mode if it is not already enabled
4. Look in the Connectivity Details section for the SFTP login information (URL, port, username)
5. Connect to the SFTP server with the provided connectivity details
6. From your Linotype.com web font kit, upload the demo.css file and entire Fonts folder to the assets folder in the SFTP server (create this folder if you do not see it)
7. Download the site.region file from the SFTP server
8. Open site.region in your text editor (make sure you are in a plaintext mode, not richtext)
9. Locate the line with {squarespace-headers}
10. Add a new line underneath that line and add this HTML tag: <link rel="stylesheet" href="/assets/demo.css>
11. Save this file and upload it back to the SFTP server. You can optionally rename the demo.css file to something more descriptive such as fonts.css. If you do, be sure to make sure that change is reflected in Step 10 when adding a reference to it.