CSS on my webpage

Site URL: https://www.lonelyriot.com

so i have two custom fonts that i want to use on my website. one is red and one is white. i need the white font to be everywhere but in the navigation menu and the red one only in the navigation menu. i already put the white font into custom css and it worked good. now i only need to add my red font to the navigation menu but i dont know how to code that. please help.

Add to Home > Design > Custom CSS. Replace redfont with correct font name

header.Header.Header--bottom * {
    font-family: redfont !important;
}

i added your code into custom css and it worked. once i refreshed the editing site it was back to the old font again. if i check my website on safari everything works exactly how i want it. if i check it on my iphone or on google chrome its back to the old problem.

On 4/2/2020 at 9:50 PM, LonelyRiot said:

i added your code into custom css and it worked. once i refreshed the editing site it was back to the old font again. if i check my website on safari everything works exactly how i want it. if i check it on my iphone or on google chrome its back to the old problem.

 

Find and Remove this code in Custom CSS

@font-face {
    font-family: Lonely Riot;
    src: url(https://static1.squarespace.com/static/5d9cd2f4d9e421160e6235a0/t/5e8381a76a4db60c262527c3/1585676785478/LonelyRiotRed.otfhttps://static1.squarespace.com/static/5d9cd2f4d9e421160e6235a0/t/5e6e97f721ba4c5543429687/1584306265722/LonelyriotWhite5.otf)
}

then add this code to position of above code

@font-face {
    font-family: Lonely Riot;
    src: url(https://static1.squarespace.com/static/5d9cd2f4d9e421160e6235a0/t/5e8381a76a4db60c262527c3/1585676785478/LonelyRiotRed.otf)
}

it didnt work sorry. still wont show my font on my iphone and on google chrome.

Try this

@font-face {
    font-family: 'Lonely Riot';
    src: url('https://static1.squarespace.com/static/5d9cd2f4d9e421160e6235a0/t/5e8381a76a4db60c262527c3/1585676785478/LonelyRiotRed.otf');
}
header.Header.Header--bottom * {
    font-family: 'Lonely Riot' !important;
}

no its still not showing my font on my iphone or on google chrome. it works on my safari browser for some strange reason. i send you two screenshots of the page on my iphone. it does a weird thing with the font to when i go to the navigation menu. it seems like only the folders but not the pages are in my white font. i thought maybe that has something to do with the problem

so thanks to the code you gave me in another forum (the link below) the lonly riot tagline workes great in the red font on all browsers and also on my phone.

but the navigation menu is still weird because it still shows two fonts like in the screenshot i postet before in this forum. 

please help