How to correctly include your own icon fonts font?

Question

css

Good afternoon, please tell me what I'm doing wrong
. How to connect them to the site?
I do it this way:
The created fonts are located in the fonts folder:
font-awesome-webfont.woff2
font-awesome-webfont.woff I wrote

in css:

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 10, 2020 */

@font-face {
    font-family: 'MyFontRegular';
    src: url('../fonts/font-awesome-webfont.woff2') format('woff2'),
    url('../fonts/font-awesome-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.mem {
    font-family: 'MyFontRegular';
    font-weight: normal;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mem-monument::before {
    content: 'a';
}

instead of the desired icon, only the letter A appeared on the site:

Answer 1

The problem was that I did not turn off the text transformation ..
It was necessary to write in the styles like this:

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 10, 2020 */

@font-face {
    font-family: 'MyFontRegular';
    src: url('../fonts/font-awesome-webfont.woff2') format('woff2'),
    url('../fonts/font-awesome-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.mem {
    font-family: 'MyFontRegular';
    font-weight: normal;
    font-style: normal;
    text-transform: none;

    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mem-monument::before {
    content: 'a';
}

Answer 2

Without markup it is not clear, but you have a font assigned to one class, and the "icon" is displayed in another.
Perhaps this will work:

.mem-monument::before {
    content: 'a';
    font-family: 'MyFontRegular';
}