CODEWITHSUNDEEP
cssfonts
Martin
Martin

Reputation: 31

Add custom font via CSS to Wordpress theme

I'm looking to replace the standard font in the team I have for a ecommerce store, www.inspirebyloui.dk.

It's not possible to do in the theme, so I'm looking to do it in the source code. However, I've tried and tried to look through the various css files to see where I can change this setting. And I still haven't managed.

Could someone help me in the right direction, by looking at the sources in the console? Getting quite frustrated.

BR Martin

Upvotes: 2

Views: 839

Answers (1)

Xavier C.
Xavier C.

Reputation: 192

There is a simple and cheap solution for wordpress sites : UseAnyFont

You can get a 'lite' (free) API key for one font on one site, then here are the prices if you need more fonts : UseAnyFont API, i have been using it for years, works like a charm.

It converts any font format to compatible web format, you don't need to bother with converting yourself or integrating. BUT, you need to be careful, some fonts are complex and can weight up to 1MB, which is not acceptable if you need to add several fonts, it can lead to extreme first visit loading times.

Or you can get the web format for your font, .woff or .eot (embedded opentype) formats, and import them in your css stylesheet like so :

@font-face {
font-family: 'yourfont-300';
font-style: normal;
src: url('/wp-content/yourtheme/yourfont.eot');
src: local('yourfont-300'), url('/wp-content/yourtheme/yourfont.eot') format('embedded-opentype'), url('/wp-content/yourtheme/yourfont.woff') format('woff');
}

And then use it like so in your css styles :

font-family:'yourfont-300';

Upvotes: 1

Related Questions