[Resolved] Use external font

[Brian]

Hi,

I want to use an external font which isn’t available on google fonts. The name of the font is “Ravie” and the link is:

https://fontzone.net/font-details/ravie

is it possible to add/display this on the site?

Kind Regards,

Brian Thompson

[David]

Hi there,

this article explains how to add local fonts:

https://docs.generatepress.com/article/adding-local-fonts/

[Brian]

Hi David,

I have already been through that. I had another look at the search for the font and I found a link and added it to the head section:

<link href=”//db.onlinewebfonts.com/c/2aeca327ae0e8ba04bf305f13cb1d589?family=Ravie” rel=”stylesheet” type=”text/css”/>

I have also added this to the css section:

.welcome {
font-family: ravie;
}

Will this work or is it going to mess up the site on me?

[Tom]

That looks like it should work. Have you tested it out, yet?

Let us know 🙂

[Brian]

Hi Tom,

Sorry for the delay in getting back to you, I have it solved. I had to put the following in with the class in custom css and then it worked for me:

@font-face {font-family: “Ravie”; src: url(“//db.onlinewebfonts.com/t/2aeca327ae0e8ba04bf305f13cb1d589.eot”); src: url(“//db.onlinewebfonts.com/t/2aeca327ae0e8ba04bf305f13cb1d589.eot?#iefix”) format(“embedded-opentype”), url(“//db.onlinewebfonts.com/t/2aeca327ae0e8ba04bf305f13cb1d589.woff2”) format(“woff2”), url(“//db.onlinewebfonts.com/t/2aeca327ae0e8ba04bf305f13cb1d589.woff”) format(“woff”), url(“//db.onlinewebfonts.com/t/2aeca327ae0e8ba04bf305f13cb1d589.ttf”) format(“truetype”), url(“//db.onlinewebfonts.com/t/2aeca327ae0e8ba04bf305f13cb1d589.svg#Ravie”) format(“svg”); }

Kind Regards,

Brian Thompson

[Tom]

No problem! Glad you got it working 🙂

[Author]

Posts