sostituire logo png con logo css

[brancomat]

sarebbe carino sostituire l'attuale logo png con qualcosa di sgarzolino in css.

Esempio brutto:

<span class="logo" style="
    margin:6px;
    padding:0px;
    color: #efefef;
    font-weight: 300;
    font-size: 30px;
    line-height: 0.65;
    font-family: 'Lobster', cursive;
">MeteoTiles<p style="
    font-size: 12px;
    margin-left: 80px;
    color: lightblue;
    font-weight: 400;
    text-transform: capitalize;
    font-family: 'Muli', sans-serif;
    margin:6px;
    padding:0px;
">version 0.20</p></span>

serve all'inizio del css l'import dei font ad es.:

@import url('https://fonts.googleapis.com/css?family=Bangers|Cinzel:400,700,900|Lato:100,300,400,700,900|Lobster|Lora:400,700|Mansalva|Muli:200,300,400,600,700,800,900|Open+Sans:300,400,600,700,800|Oswald:200,300,400,500,600,700|Roboto:100,300,400,500,700,900&display=swap');
/* Used Google Fonts */
font-family: 'Roboto', sans-serif;
font-family: 'Mansalva', cursive;
font-family: 'Lato', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Lora', serif;
font-family: 'Muli', sans-serif;
font-family: 'Lobster', cursive;
font-family: 'Cinzel', serif;
font-family: 'Bangers', cursive;