Google-Fonts-Previewer/index.html at master · elharony/Google-Fonts-Previewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-128258295-2"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-128258295-2');
    </script>


    <!-- Meta Tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- SEO -->
    <title>Google Fonts Previewer | Try & Decide between +900 Fonts!</title>
    <meta name="description" content="Google Fonts Previewer allows you to Copy & Paste your text, Choose from +900 Google Fonts, and see how it looks. Stop relying on dummy text!"/>
    <meta name="keywords" content="Google Fonts Previewer, Font Changer, Online Font Previewer, Google Fonts Helper, Font Tester, Test fonts online, Preview Fonts online">

    <!-- CSS & Fonts -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

</head>
<body>


    <!-- Fonts List -->
    <aside>
        <h1 title="Google Fonts Previewer">
            <img src="img/google-fonts-logo.svg" alt="Google Fonts Logo">
            <br>
            Previewer
        </h1>
        <div class="finder">
            <input
               type="text"
                id="font-search"
                aria-label="Search fonts"
                placeholder="Search...."
                onkeyup="searchFonts()">
        </div>

        <div id="fonts"></div>
    </aside>

    <main>

        <!-- Controls / Features -->
        <header>
            <div class="selected-font"><span></span> No selected font</div>
            <div class="size">
                <span id="current-size">28px</span>
                <input type="range" id="size_controller" min="10" max="100" value="28">
                <i class="fas fa-font fa-lg"></i>
            </div>
            <div class="copy-font"><button id="copy-font"><i class="far fa-copy"></i></button></div>
        </header>

        <!-- Content Area -->
        <textarea id="content">
            This is a test text. Do you like it in your language?
            这是一篇测试文。 你喜欢用你的语言吗？
            यह एक परीक्षण पाठ है। क्या आप इसे अपनी भाषा में पसंद करते हैं?
            Este es un texto de prueba. ¿Te gusta en tu idioma?
            Ceci est un texte test. L'aimez-vous dans votre langue ?
            هذا نص تجريبي. هل يعجبك في لغتك؟
            এটি একটি পরীক্ষামূলক পাঠ্য। আপনি আপনার ভাষায় এটা পছন্দ করেন?
            Это тестовый текст. Нравится ли вам это на вашем языке?
            Este é um texto de teste. Você gosta disso no seu idioma?
            یہ ایک آزمائشی متن ہے۔ کیا آپ کو اپنی زبان میں یہ پسند ہے؟
            Ini adalah teks tes. Apakah Anda menyukainya dalam bahasa Anda?
            Dies ist ein Testtext. Gefällt es dir in deiner Sprache?
            これはテストテキストです。 あなたの言語ではそれが好きですか？
            Đây là một văn bản thử nghiệm. Bạn có thích nó trong ngôn ngữ của bạn?
            Hii ni maandishi ya majaribio. Je, unaipenda kwa lugha yako?
            테스트 글입니다. 당신의 언어로 그것을 좋아합니까?
            Questo è un testo di prova. Ti piace nella tua lingua?
            นี่คือข้อความทดสอบ คุณชอบมันในภาษาของคุณหรือไม่?
        </textarea>

        <!-- Copyrights & Contributions -->
        <footer>Started by <a href="https://www.elharony.com">Elharony</a> & Available on <a href="https://github.com/elharony/Google-Fonts-Previewer">GitHub</a></footer>
    </main>

    <script src="js/main.js"></script>
</body>
</html>