How do use @font-face with Use Any Font

Home Forums Use Any Fonts How do use @font-face with Use Any Font

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #308127
    Martin
    Guest

    What do I put as the src for @font-face? For example:

    @font-face {
    font-family: “Roboto”;
    src: url(“/fonts/Roboto-Regular.eot”);
    src: url(“/fonts/Roboto-Regular.eot?#iefix”) format(’embedded-opentype’),
    url(“/fonts/Roboto-Regular.woff2”) format(‘woff2’),
    url(“/fonts/Roboto-Regular.woff”) format(‘woff’),
    url(“/fonts/Roboto-Regular.ttf”) format(‘truetype’);
    font-weight: 400;
    font-style: normal;
    }

    Where does Use Any Font put the fonts locally, and how can I reference them? An example would be appreciated.

    #308296
    Dinesh
    Keymaster

    Hi Martin,

    Use Any Font stores the font file in wp-content/uploads/useanyfont folder. You can reference the font file from there.

    But it is not needed to do that. As you can just assign the font family or class (same as font name) and it should take the effect.

    Thanks

    #308319
    Martin
    Guest

    What do you mean by this

    As you can just assign the font family or class (same as font name) and it should take the effect.

    Assign it where? And how? Please provide an example, thanks.

    #308609
    Dinesh
    Keymaster

    Hi Martin,

    What you are trying to achieve here ? I can suggest you as per it.

    Thanks

    #308633
    Martin
    Guest

    Thanks, Dinesh. I’m trying to load Google Fonts locally, then only fallback to the Google fonts servers if local isn’t available. And also trying to take advantage of the new font-display: swap option. So the css would look something like this.

    @font-face {
    font-family: ‘Lobster’;
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: local(‘Lobster Regular’), local(‘Lobster-Regular’), url(https://fonts.gstatic.com/s/lobster/v21/neILzCirqoswsqX9zo-mM5Ez.woff2) format(‘woff2’);
    }

    In the Use Any Font list of fonts that are uploaded, can I use the names directly? So if I have something like “montserrat-italic” in the font list, can I use it in the above css as src: local(‘montserrat-italic’) ?

    Thanks for your help.

    #309316
    Dinesh
    Keymaster

    Hi Martin,

    You don’t need to do this. You can just use our plugin and then it will work for all (either fonts available locally or not. )

    Thanks

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How do use @font-face with Use Any Font’ is closed to new replies.