How do i load custom fonts in polymer 2.x

I have problem with loading web font. How do i do that ?

@font-face {
    font-family: 'RobotoCondensed';
    font-weight: 400;
    font-style: normal;

    src: url('../fonts/rc.eot'); // IE9 Compat Modes */
    src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('../fonts/rc.eot?#iefix') format('embedded-opentype'), // IE6-IE8 */
    url('../fonts/rc.woff2') format('woff2'), // Super Modern Browsers */
    url('../fonts/rc.woff') format('woff'), // Modern Browsers */
    url('../fonts/rc.ttf') format('truetype'), // Safari, Android, iOS */
    url('../fonts/rc.svg#RobotoCondensed') format('svg'); // Legacy iOS */
}

Here is my html import:

<style>
@font-face {
    font-family: 'RobotoCondensed';
    font-weight: 400;
    font-style: normal;

    src: url('../fonts/rc.eot'); // IE9 Compat Modes */
    src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('../fonts/rc.eot?#iefix') format('embedded-opentype'), // IE6-IE8 */
    url('../fonts/rc.woff2') format('woff2'), // Super Modern Browsers */
    url('../fonts/rc.woff') format('woff'), // Modern Browsers */
    url('../fonts/rc.ttf') format('truetype'), // Safari, Android, iOS */
    url('../fonts/rc.svg#RobotoCondensed') format('svg'); // Legacy iOS */
}

</style>
<!-- Dependency resources -->
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/shadycss/apply-shim.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="../ui/layout/layout-bundle.html">
<link rel="stylesheet" href="../font.css">
<!-- Defines the example-template element -->
<dom-module id="neg-door">
    <template>
        <style include="header-view left-view"></style>
        <div id="header">
            <search-view id="search-view"></search-view>
            <locations></locations>
        </div>
        <div id="left">
            <span>left</span>
            <category-view id="category-view"></category-view>
        </div>
        <content-view id="content-view"></content-view>
        <div id="right">
            <span>right</span>
            <my-room></my-room>
        </div>
    </template>
    <!-- Polymer boilerplate to register the example-template element -->
    <script>
    class NegDoor extends Polymer.Element {
        static get is() {
            return 'neg-door'
        }
    }
    customElements.define(NegDoor.is, NegDoor);

    </script>
</dom-module>

Solution

Here an example, at index.html between head tag:

<link rel="import" href="src/style.html">

an example at style.html:

<!DOCTYPE html>
<style>
 @import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
 @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
 html,
 body {
  font-family: 'Roboto', Arial, sans-serif;
  height: 100%;
  margin: 0;
 }

 jj-app[unresolved] {
  display: block;
  background-image: url('../images/beach.jpg')
  min-height: 101vh;
  line-height: 68px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: #202020;
  padding: 0 16px;
  overflow: visible;
 }

 #fbui {
     position: fixed;
     top: 20%;
     margin: 10px 10px;
     width: 88%;
     padding: 10px;
     border: 3px solid green;
     display: none;
 }
</style>
<script>
 var importDoc = document.currentScript.ownerDocument;
 var style = importDoc.querySelector('style');
 document.head.appendChild(style);
</script>