# Fonts This article explains the how fonts are used by the Telerik® UI for ASP.NET AJAX controls skins. Below you can find information about: * [how the `font-size`, `font-family`, `font-weight` and `font-style` rules used by the controls](https://www.telerik.com/products/aspnet-ajax/documentation/styling/controlling-visual-appearance/fonts#general-font-css-rules) * [the list of skins that have a `font-family` predefined](https://www.telerik.com/products/aspnet-ajax/documentation/styling/controlling-visual-appearance/fonts#skins-with-predefined-font-family) * [`font-weight` specifics](https://www.telerik.com/products/aspnet-ajax/documentation/styling/controlling-visual-appearance/fonts#font-weight-specifics) * [font icons size](https://www.telerik.com/products/aspnet-ajax/documentation/styling/controlling-visual-appearance/fonts#font-icon-size) ## General Font CSS Rules ### Lightweight Render Mode In the [Lightweight Render Mode](https://www.telerik.com/products/aspnet-ajax/documentation/styling/controlling-visual-appearance/render-modes) all UI for ASP.NET AJAX controls do not have a default font as of **Q1 2016 SP1**. This means the controls do not have `font-size`, `font-family`, `font-weight` and `font-style` predefined and inherit the font-size of the `` element if such is set. Otherwise, the default browser values apply. This provides all Telerik controls on the page with the same look and feel by making use of their [elastic design capabilities](https://www.telerik.com/products/aspnet-ajax/documentation/mobile-support/responsive-behaviors). In case a Telerik control is placed in a container with explicit font set, the Telerik control will inherit this font or the font of the first wrapper element that has font specified. > tip For best look and feel we recommend to set `font-size: 14px` and `font-family: "Segoe UI", Arial, Sans-serif;` (**Example 1**) for all skins except the [Skins with Predefined Font-family](https://www.telerik.com/products/aspnet-ajax/documentation/styling/controlling-visual-appearance/fonts#skins-with-predefined-font-family) where you should use their preferred font family. > caption **Example 1**: Setting font for the page which will be inherited from Telerik controls. ```CSS body { font-size: 14px; font-family: "Segoe UI", Arial, Sans-serif; } ``` > note > The Bootstrap, Material, Metro and (Black)MetroTouch skins have `font-family` defined. With the mentioned Release we have also improved the metrics of AJAX form controls. The ASP.NET AJAX skin palette is divided into three main categories: Default skins, Bootstrap skin and the Material skin. In each of the above there are established interrelated connections between width, height, font size (14px), line height (20px), paddings and borders. A dimension-orientated scheme based on line height and font size ratio is created—1.428571429 (20/14)—that keeps the main proportions of controls consistent with each other, used individually, combined in a complex data form or integrated in composite container controls. By changing just the font size, the layout of the controls can easily be adjusted to fulfill various needs. This provides convenient scalability. ### Classic Render Mode The Classic Render Mode remains unchanged and uses the 12px font-size and the Segoe UI font that have always been used. A few skins have a font-family defined, however: [Skins with Predefined Font-family](https://www.telerik.com/products/aspnet-ajax/documentation/styling/controlling-visual-appearance/fonts#skins-with-predefined-font-family). ## Skins with Predefined Font-family The skins listed below have predefined font-family as follows: * Material—font-family: "Roboto", "Noto", sans-serif; * Bootstrap—font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; * Metro—font-family: "Segoe UI", Arial, Helvetica, sans-serif; > note The Material skin includes the **Roboto** font-file from the Google cloud. It will be used even if it is not installed on the user computer, but downloading it requires an active Internet connection. The [Use Material Skin Without Active Internet Connection](https://www.telerik.com/support/kb/aspnet-ajax/details/use-material-skin-without-active-internet-connection) KB article explains a possible approach to avoid these requests. ## Font-weight Specifics If you increase the `font-size` to 16px, 20px or even larger, we recommended you set `font-weight: 100` on the page. This applies particularly for **BlackMetroTouch** and **MetroTouch** skins. ## Font Icon Size In **Lightweight** RenderMode of the controls font icons are used for better performance instead of image sprites for the tool icons, selection indicators, predefined badges, etc. These font-icons are designed in a **16px** grid base, so for best image quality the resizing should be in a 16-scalable size. The only exception is Material skin, in which the grid base of the icons is optimized for **18px**. One of the greatest benefits of using font icons is the ability to scale them up and down with ease. However, if we would like to have crisp, sharp images, we need to deal with some technical limitations—especially in small sizes. Although font icons consist of vector graphics, we should keep in mind that each icon is designed in a fixed pixel grid. A pixel grid is the minimum-scaled canvas in which our icon would look pixel-perfect. Every detail of the icon should be aligned to that grid system. Therefore, the final image-icon will have the best quality when its size equals the base pixel grid size or multiplies it. If you'd like to use icons with a font size of 16px, 32px or 48px, you should use a font icon design in a base grid canvas scalable to 16x16. If you'd like to use an icon in 14px, 28px or 42px size, the base canvas should be 14x14, etc. So, when one uses a font with a pixel grid base of 16px and sets the font size to 17px, the browser is going to antialiase the semi-transparent pixels and render a blurred image. Have in mind that the bigger the font icon size is, the better quality the image will be. ## List of WebComponentsIcons icons WebComponentsIcons is the font used for rendering iconography in the Telerik UI for ASP.NET AJAX framework. Below is a reference table that displays each specific icon along with its corresponding code:

\e000

\e001

\e002

\e003

\e004

\e005

\e006

\e007

\e008

\e009

\e00a

\e00b

\e00c

\e00d

\e00e

\e00f

\e010

\e011

\e012

\e013

\e014

\e015

\e016

\e017

\e018

\e019

\e01a

\e01b

\e01c

\e01d

\e01e

\e01f

\e020

\e021

\e022

\e023

\e024

\e025

\e026

\e027

\e028

\e029

\e02a

\e02b

\e02c

\e02d

\e02e

\e02f

\e030

\e031

\e032

\e033

\e034

\e100

\e101

\e102

\e103

\e104

\e105

\e106

\e107

\e108

\e109

\e10a

\e10b

\e10c

\e10d

\e10e

\e10f

\e110

\e111

\e112

\e113

\e114

\e115

\e116

\e117

\e118

\e119

\e11a

\e11b

\e11c

\e11d

\e11e

\e11f

\e120

\e121

\e122

\e123

\e124

\e125

\e126

\e127

\e128

\e129

\e12a

\e12b

\e12c

\e12d

\e12e

\e12f

\e130

\e131

\e132

\e133

\e134

\e135

\e136

\e137

\e138

\e139

\e13a

\e13b

\e13c

\e13d

\e13e

\e13f

\e140

\e141

\e142

\e143

\e144

\e145

\e146

\e147

\e148

\e149

\e14a

\e14b

\e14c

\e14d

\e14e

\e14f

\e150

\e151

\e152

\e153

\e154

\e155

\e156

\e157

\e158

\e159

\e15a

\e15b

\e15c

\e200

\e201

\e202

\e203

\e204

\e205

\e206

\e207

\e208

\e209

\e20a

\e20b

\e20c

\e20d

\e20e

\e300

\e301

\e302

\e303

\e304

\e305

\e306

\e307

\e308

\e309

\e30a

\e400

\e401

\e402

\e403

\e500

\e501

\e502

\e503

\e504

\e505

\e506

\e507

\e508

\e509

\e50a

\e50b

\e50c

\e50d

\e50e

\e50f

\e510

\e511

\e512

\e513

\e514

\e515

\e516

\e517

\e518

\e519

\e51a

\e51b

\e51c

\e51d

\e51e

\e51f

\e520

\e521

\e522

\e523

\e524

\e525

\e526

\e527

\e528

\e529

\e52a

\e52b

\e52c

\e52d

\e52e

\e52f

\e530

\e531

\e532

\e533

\e534

\e535

\e536

\e537

\e538

\e539

\e53a

\e53b

\e53c

\e53d

\e53e

\e53f

\e540

\e541

\e542

\e543

\e544

\e545

\e546

\e547

\e548

\e549

\e54a

\e54b

\e54c

\e54d

\e54e

\e54f

\e550

\e551

\e552

\e553

\e600

\e601

\e602

\e603

\e604

\e605

\e606

\e607

\e608

\e609

\e60a

\e60b

\e60c

\e60d

\e60e

\e60f

\e610

\e611

\e612

\e613

\e614

\e615

\e616

\e617

\e618

\e619

\e61a

\e61b

\e61c

\e61d

\e61e

\e61f

\e620

\e621

\e622

\e623

\e624

\e625

\e626

\e627

\e628

\e629

\e62a

\e62b

\e62c

\e62d

\e62e

\e62f

\e630

\e631

\e632

\e633

\e634

\e635

\e636

\e637

\e638

\e639

\e63a

\e63b

\e63c

\e63d

\e63e

\e63f

\e640

\e641

\e642

\e643

\e644

\e645

\e646

\e647

\e648

\e649

\e64a

\e64b

\e64c

\e64d

\e64e

\e64f

\e650

\e651

\e652

\e653

\e654

\e655

\e656

\e657

\e658

\e659

\e65a

\e65b

\e65c

\e65d

\e65e

\e65f

\e660

\e661

\e662

\e663

\e664

\e665

\e666

\e667

\e668

\e669

\e66a

\e66b

\e66c

\e66d

\e66e

\e66f

\e670

\e671

\e672

\e673

\e674

\e675

\e676

\e677

\e678

\e679

\e67a

\e67b

\e67c

\e67d

\e67e

\e67f

\e680

\e681

\e682

\e683

\e684

\e685

\e686

\e687

\e688

\e689

\e68a

\e68b

\e68c

\e68d

\e68e

\e68f

\e690

\e691

\e692

\e693

\e694

\e695

\e696

\e697

\e698

\e699

\e69a

\e69b

\e69c

\e69d

\e69e

\e69f

\e6a0

\e6a1

\e700

\e701

\e702

\e703

\e704

\e705

\e800

\e801

\e802

\e803

\e804

\e805

\e806

\e807

\e808

\e809

\e80a

\e80b

\e80c

\e80d

\e80e

\e80f

\e810

\e811

\e812

\e813

\e814

\e815

\e816

\e817

\e818

\e819

\e81a

\e81b

\e81c

\e81d

\e81e

\e81f

\e820

\e821

\e822

\e823

\e824

\e825

\e826

\e827

\e828

\e829

\e82a

\e82b

\e82c

\e900

\e901

\e902

\e903

\e904

\e905

\e906

\e907

\e908

\e909

\e90a

\e90b

\e90c

\e90d

\e90e

\e90f

\e910

\e911

\e912

\e913

\e914

\e915

\e916

\e917

\e918

\e919

\e91a

\e91b

\e91c

\e91d

\e91e

\e91f

\e920

\e921

\e922

\e923

\e924

\e925

\e926

\e927

\e928

\e929

\e92a

\e92b

\e92c

\e92d

\e92e

\e92f

\e930

\e931

\e932

\e933

\e934

\e935

\e936

\e937

\e938

\e939

\e93a

\e93b

\e93c

\e93d

\e93e

\e93f

\e940

\e941

\e942

\e943

\e944

\e945

\e946

\e947

\e948

\e949

\e94a

\e94b

\e94c

\e94d

\e94e

\ea00

\ea01

\ea02

\ea03

\ea04

\ea05

\ea06

\ea07

\ea08

\ea09

\ea0a

\ea0b

\ea0c

\ea0d

\ea0e

\ea0f

\ea10

\ea11

\ea12

\ea13

\ea14

\ea15

\ea16

\ea17

\ea18

\ea19

\ea1a

\ea1b

\ea1c

\ea1d

\ea1e

\ea1f

\ea20

\ea21

## How to Use WebComponentsIcons To use a specific icon from the WebComponentsIcons font in your project, you can define a CSS rule and use the `content` property with the corresponding Unicode value. The following example demonstrates how to use the `@font-face` rule to load the WebComponentsIcons font and apply a **Star icon** as a styled element. ```CSS ``` HTML ```HTML ``` ## See Also * [Visual and Dimension Improvements in UI for ASP.NET AJAX](https://www.telerik.com/blogs/visual-and-dimension-improvements-in-ui-for-asp.net-ajax) * [Use Material Skin Without Active Internet Connection](https://www.telerik.com/support/kb/aspnet-ajax/details/use-material-skin-without-active-internet-connection)