Forums

Adding custom font, Cloneamental

Permalink 1 user found helpful
I have a custom font that I would like to use for headlines onwww.www.svenskproffscykling.se....

I've tried looking around but mainly find older guides that doesn't seem to work with current version. That or I just can't find the right place to add the fonts.

Can anyone help me how I go from having the font-files on my PC to being able to select them in the CMS?
AllanHG
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi AllanHG,

Which text on your page are you referring to?
AllanHG replied on at Permalink Reply
AllanHG
Hi.
Most importantly the site-wide header which says "Svensk Proffscykling" but even headlines in the slider underneath and possibly headlines in other places.
If I could just figure out how to add a font to the list of fonts available for selection (or replacing one the ones already there).
stewblack23 replied on at Permalink Reply
stewblack23
The easiest way to add fonts to your site is to use Google Fonts. Then look in the google font library and select the font you like.

But if you must use a specific font on your computer. You can use the CSS3 property @font-face. Here is a ww.w3scools.org tutorlial on the subject.

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp...
Steevb replied on at Permalink Reply
Steevb
One way to add a font to your site.

Upload/paste your custom font to: ‘themes/cloneamental/css/build/fonts/defaults.less’.

For example, I’ve done this:
@font-face {
    font-family: 'merriweatherregular';
    src: url('merriweather-regular-webfont.woff2') format('woff2'),
         url('merriweather-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

No need for any other variants anymore. i.e eot, ttf, etc.

Then in: ‘themes/cloneamental/css/presets/defaults.less’ edit the ‘Headings’ to match your new font.
// Headings
@h1-type-font-family: ~"'merriweatherregular', Helvetica, Arial, sans-serif";
@h1-type-color: #1a1a1a;
@h1-type-font-size: 2.1em;
@h1-type-font-weight: 700;



Or apply font to any other element required.

Issue: New font might not kick in if you’ve changed anything in the ‘Customise Theme’ sidebar. Might need to clear cache a couple of times.