Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom Fonts Not Loading Properly


Question

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

Hi all, I added a custom font to a website I built, following instructions online with the following code:

@font-face {
font-family: 'font-name';
src: url(https://static1.squarespace.com/static/60c04bccb3eb927f554f9eeb/t/60cec441871e18034ea73d58/1624163393990/Corinthiago.otf)

}
h2 {
font-family: 'corinthiago', Balboa Plus Inline;
}


...but it only loads properly on my laptop. On my phone and other devices the font that loads in place of the Corinthiago is some bland font that I haven't used anywhere else in the design. The default font I have is a squarespace one--Balboa Plus Inline, but that one doesn't load in place of the Corinthiago. I don't know a lot about coding--would anyone be able to help me troubleshoot this? In the meantime I've just removed the custom CSS so that Balboa Plus Inline is all that loads, but that's not my client's preference.

Thanks for your help!

Screen Shot 2021-07-02 at 1.46.10 PM.png

Screen Shot 2021-06-29 at 8.34.05 AM.png

Link to comment

2 answers to this question

Recommended Posts

  • 0

you haven't specified the font name in your style sheet, it's still in there as "font-name". Probably just didn't spot you had to change it in two places from where you copied it in.

change that to corinthiago and you'll probably be OK. the reason it works on your laptop is probably because you've got the font installed locally.

so something like this.

@font-face {
font-family: corinthiago;
src: url(https://static1.squarespace.com/static/60c04bccb3eb927f554f9eeb/t/60cec441871e18034ea73d58/1624163393990/Corinthiago.otf)

}
h2 {
font-family: corinthiago, "Balboa Plus Inline";
}

 

Dave Hart. Software/Technology Consultant living in London

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...