ushio
/
video_system


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
							<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.2/css/material-design-iconic-font.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../css/froala_editor.css">
  <link rel="stylesheet" href="../../css/froala_style.css">

  <link
    href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic&subset=latin,vietnamese,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek'
    rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext' rel='stylesheet'
    type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link
    href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,cyrillic,latin-ext'
    rel='stylesheet' type='text/css'>

  <style>
    body {
      text-align: center;
    }

    section {
      width: 81%;
      margin: auto;
      text-align: left;
    }
  </style>
</head>

<body>
  <section id="editor">
    <div id='edit' style="margin-top: 30px;">
      <h1>Font Family</h1>

      <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />

      <p>When using the font_family.min.js plugin it is possible to add your own fonts to be used inside the WYSIWYG
        HTML editor.</p>

      <p>First you have to include the font on your webpage. In this example we are adding 4 Google fonts: Roboto,
        Oswald, Montserrat and Open Sans Condensed. Then you have to define the fonts that should appear in the Font
        Family dropdown using the <a href='https://www.froala.com/wysiwyg-editor/v2.0/docs/options#fontFamily'
          title='fontFamily' target='_blank'>fontFamily</a> option. This option is an Object where the key represents
        the font name (just the way you would pass it to the font-family CSS rule e.g. font-family: <strong>'Roboto',
          sans-serif</strong>;) and its value is the font name that appears in the dropdown list e.g.
        <strong>Roboto</strong>.</p>

      <p>By default the font family icon is visible in the editor's toolbar. If you want to be able to see the actual
        font family for the selected text you can use the <a
          href='https://www.froala.com/wysiwyg-editor/v2.0/docs/options#fontFamilySelection' title='fontFamilySelection'
          target='_blank'>fontFamilySelection</a> option.</p>
    </div>
  </section>

  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>

  <script>
    (function () {
      new FroalaEditor("div#edit", {
        fontFamily: {
          "Roboto,sans-serif": 'Roboto',
          "Oswald,sans-serif": 'Oswald',
          "Montserrat,sans-serif": 'Montserrat',
          "'Open Sans Condensed',sans-serif": 'Open Sans Condensed'
        },
        fontFamilySelection: true
      })
    })()
  </script>
</body>

</html>