[Resolved] Need Help Installing Non-Google Local Font

[Jennifer]

Hi – I’m trying to upload a local font that is not a Google font. The documentation works great for Google fonts, but I’m having trouble applying it to this local font. Here is the CSS code I was trying to add. Can you help troubleshoot? To clarify, Permanent Market (which is a Google font) is working great. Aracne is not.

/* permanent-marker-regular – latin */
@font-face {
font-family: ‘Permanent Marker’;
font-style: normal;
font-weight: 400;
src: url(‘https://kunarolls.com/wp-content/uploads/2022/05/permanent-marker-v16-latin-regular.eot’); /* IE9 Compat Modes */
src: local(”),
url(‘https://kunarolls.com/wp-content/uploads/2022/05/permanent-marker-v16-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://kunarolls.com/wp-content/uploads/2022/05/permanent-marker-v16-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://kunarolls.com/wp-content/uploads/2022/05/permanent-marker-v16-latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://kunarolls.com/wp-content/uploads/2022/05/permanent-marker-v16-latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://kunarolls.com/wp-content/uploads/2022/05/permanent-marker-v16-latin-regular.svg#PermanentMarker’) format(‘svg’); /* Legacy iOS */
}

/* aracne https://www.dafont.com/aracne.font */
@font-face {
font-family: ‘Aracne’;
font-style: normal;
font-weight: 400;
src: url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.eot’) format(’embedded-opentype’); /* IE9 Compat Modes */
}

[Fernando]

Hi Jeniffer,

Can you add the woff2, woff, truetype and svg sources for the Aracne font as well? You can copy the format on how it’s done for Permanent Marker, just replace the URL.

[Jennifer]

Hi Fernando – Shouldn’t the EOT file work?

I think I only have TTF and OTF and EOT

Do I need WOFF and SVG?

[Ying]

Hi Jennifer,

You can check the font format supported by different browsers and decide which format you need:
https://www.w3schools.com/css/css3_fonts.asp

[Jennifer]

Never mind I figured it out…I didn’t realize I had to upload all the other files. Thanks!

[Ying]

No problem 🙂

[Author]

Posts