JSFiddle - React, Tailwind, and code Playground

by takumi091111

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Google Fonts</title>
    <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
</head>
<body>
    <div class="item leafscape">
        <p>Leafscape</p>
        <p>https://leafscape.be/fonts/90.html</p>
        <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
        <p>綺麗だけど重い(798KB)</p>
    </div>
    <div class="item google-fonts">
        <p>Google Fonts</p>
        <p>https://fonts.google.com/specimen/M+PLUS+Rounded+1c</p>
        <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
        <p>軽いけど汚い</p>
    </div>
    <div class="item google-fonts smoothing">
        <p>Google Fonts + CSS</p>
        <p>https://fonts.google.com/specimen/M+PLUS+Rounded+1c</p>
        <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
        <p>軽くて綺麗！</p>
    </div>
</body>
</html>

CSS

@font-face {
  font-family: Rounded-Mplus-1c-regular;
  src: url('https://cdn.leafscape.be/rounded-Mplus/rounded-mplus-1c-regular_web.woff2') format('woff2');
}

.item {
    padding: 10px 0;
}

.leafscape {
  font-family: 'Rounded-Mplus-1c-regular', sans-serif;
}

.google-fonts {
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

.smoothing {
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
  transform: rotate(0.028deg);
}