Customowa czcionka i symbole w CSS

[Stalker]

Cześć,

A więc tak - korzystam z customowej czcionki, która zamiast liter wyświetla symbole i żeby określić styl każdego z nich muszę ciagle przepisywać lub kopiować kod html, a chcę to skonfigurować tak by móc go dowolnie używać bez potrzeby przepisywania kodu, np. w CSS. Czy da się coś takiego zrobić? Czy możliwe jest zrobienie tego tak jak z div’ami, tyle tylko że tu byłby skonfigurowany określony dla danej litery symbol, a później w kodzie strony już tylko odwołanie do kodu CSS.

Np.:

symbol {
typ czcionki:
litera z tej czcionki przypisana do danego symbolu:
kolor czcionki:
wielkość:
}

A w kodzie strony już tylko (symbol)(/symbol).

Z góry dzięki za pomoc

[Bradlee]

Jeżeli dobrze rozumiem to co chcesz uzyskać, to zrobiłbym tak:
css:

:root {
  --fontName: "Indie Flower";
}

@font-face {
  font-family: 'var(--fontName)';
  src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}

.letter_a::before {
    font-family: 'var(--fontName)';
    content: "A";
    font-size: 20px;
    color: red;
}

.letter_b::before {
    font-family: 'var(--fontName)';
    content: "B";
    font-size: 30px;
    color: green;
}

.letter_c::before {
    font-family: 'var(--fontName)';
    content: "C";
    font-size: 45px;
    color: blue;
}

html:

<span class='letter_a'></span>
<span class='letter_b'></span>
<span class='letter_c'></span>

Wymyślanie własnych tagów to nie jest najlepszy pomysł.
Zobacz też Jak dołączyć własne fonty do projektu – @font-face w CSS - devmentor.pl

[krystian3w]

Demo nie działa z Firefox, Mozilla nie popiera logiki jaką poszło Apple/Google.

W sumie dziwne, że czcionka nie odpala się jak będzie:

<div class="symbol">U</div>

jak przy Wingdings i Webdings (niby obie wreście działają z Thunderbird 102+)

[Stalker]

hmmm, pomimo dodania linijki font-face nie wczytuje mi symboli tylko oryginalny content…

[Bradlee]

zaktualizowałm moją pierwszą odpowiedź o możliwość używania zewnętrznych czcionek

[Stalker]

dzięki! teraz wszystko działa jak należy