Managing fonts

The main font used by the component is: Arial

The fallback fonts are: Verdana, Helvetica, Tahoma, Helvetica Neue, -apple-system, Liberation Sans

Arial, Verdana, Helvetica, Tahoma, Helvetica Neue are available on Windows and the latest versions of OS X.
Arial is also available on certain Linux distributions.
In case Arial and all the consecutive fonts are not available on Linux, the fallback font will be Liberation Sans which is the metric equivalent of Arial font.
-apple-system is here just to make sure older versions of OS X are covered in case the preceding fonts are not available.
This way we made sure our component will look and feel the same on a wide array of operating systems and their versions.

The class where fonts are defined is the following and you can find it in tw-pdf-viewer.css file:

CSS example

Copy

.tw2018elem_mainContainer[data-tw2018-pdf-viewer] {
    text-align: left;
    position: relative;
    font-family: Arial, "Verdana, Helvetica, Tahoma, "Helvetica Neue",
    -apple-system, "Liberation Sans";
    font-size: 14px;
    font-weight: 400;
}

In case you wish to load your custom font, first, you need to specify your own font-family name using @font-face like in the example below:

CSS example

Copy

@font-face{
    font-family: myAwesomeCustomFont;
    src: url(perfect_grey.woff)
}

Afterwards, define your custom font in .tw2018elem_mainContainer[data-tw2018-pdf-viewer] class, make sure to position your custom font first when defining it in the font-family property:

CSS example

Copy

.tw2018elem_mainContainer[data-tw2018-pdf-viewer] {
    text-align: left;
    position: relative;
    font-family: myAwesomeCustomFont, Arial, Verdana, Helvetica, Tahoma, "Helvetica Neue",
    -apple-system, "Liberation Sans";
    font-size: 14px;
    font-weight: 400;
}

If you'd like to use your own custom font on a few components only, make sure to override the default font-family directly on those components by creating your own custom class or adding the custom font-family in already available CSS on that component.

Other Resources

Creating custom CSS theme

Changing the theme