iPhone Safari Load custom font...

[GrumpyYoungMan]

HELP - again...

Code: [Select]

@font-face {
            font-family: "FriendsTVFont";
            src: url("./font/GABRWFFR.ttf");
        }
Doesn't seem to load the font in mobile iPhone Safari web browser although it works in Edge and Firefox?

[GrumpyYoungMan]

FIXED!!

It was incorrect case with a case sensitive operating system! 

[coothead]

Hi there GrumpyYoungMan,

Have you not considered using woff instead ofttf fonts?

There are three main benefits to using WOFF:

• The font data is compressed, so sites using WOFF will use less bandwidth
  and will load faster than if they used equivalent uncompressed TrueType or
  OpenType files.
• Many font vendors that are unwilling to license their TrueType or OpenType
  format fonts for use on the web will license WOFF format fonts. This
  improves availability of fonts to site designers.
• Both proprietary and free software browser vendors like the WOFF format,
  so it has the potential of becoming a truly universal, interoperable font format
  for the web, unlike other current font formats.

Further reading:-

MDN - WOFF (the Web Open Font Format)

coothead

[GrumpyYoungMan]

Hi there GrumpyYoungMan,

Have you not considered using woff instead ofttf fonts?

There are three main benefits to using WOFF:

• The font data is compressed, so sites using WOFF will use less bandwidth
  and will load faster than if they used equivalent uncompressed TrueType or
  OpenType files.
• Many font vendors that are unwilling to license their TrueType or OpenType
  format fonts for use on the web will license WOFF format fonts. This
  improves availability of fonts to site designers.
• Both proprietary and free software browser vendors like the WOFF format,
  so it has the potential of becoming a truly universal, interoperable font format
  for the web, unlike other current font formats.

Further reading:-

MDN - WOFF (the Web Open Font Format)

coothead

I’ll have a look, I did actually convert the font to woff format, but it wouldn’t work - I bet the case was wrong again so will definitely look into that!

I only looked at this font as I was playing with different dot spacing with different colours every 3rd dot! 🤪😂😂

Thanks as always for taking the time to reply and keeping me on the right track I appreciate it and the continued patiences!

[GrumpyYoungMan]

Hi there GrumpyYoungMan,

Have you not considered using woff instead ofttf fonts?

There are three main benefits to using WOFF:

• The font data is compressed, so sites using WOFF will use less bandwidth
  and will load faster than if they used equivalent uncompressed TrueType or
  OpenType files.
• Many font vendors that are unwilling to license their TrueType or OpenType
  format fonts for use on the web will license WOFF format fonts. This
  improves availability of fonts to site designers.
• Both proprietary and free software browser vendors like the WOFF format,
  so it has the potential of becoming a truly universal, interoperable font format
  for the web, unlike other current font formats.

Further reading:-

MDN - WOFF (the Web Open Font Format)

coothead

Just because... - I was playing with the different colour dots...

[Jason Knight]

... and woff2 compresses even smaller.

Now, that said, your @font-face declaration is incomplete as you didn't state the default weight or style. Yes, that matters as it has to match your content's declarations.

the pointless use of the local reference ".\" could be screwing things up too.

[GrumpyYoungMan]

... and woff2 compresses even smaller.

Now, that said, your @font-face declaration is incomplete as you didn't state the default weight or style. Yes, that matters as it has to match your content's declarations.

the pointless use of the local reference ".\" could be screwing things up too.

The woff2 format saved 3k 🤪😂😂😂

What did I miss, Jason? As I thought that was optional?

 I honestly didn’t expect that answer from you, I expected a WHY? 🙊

[GrumpyYoungMan]

What are you thoughts on this

My little test script works okay on mobile but isn’t so good on the desktop browsers...

[coothead]

Hi there GrumpyYoungMan,

this slightly amended CSS worked OK for me...

Code: [Select]

@font-face {
    font-family: FriendsTVFont;
    src: url( '/fonts/gabrwffr.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    font: normal 1em / 1.62em helvetica, sans-serif;
    background: #000;
    color: #fff;
    height: 100%;
}

body {
    display:flex;
    flex-direction: column;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

header, footer {
    flex: 0 0;
    background: #333;
    padding: 1em 0em;
}

footer {
    text-align: center;
}

main {
    margin: auto;
}

#friends ul {
    list-style: none;
    font: bold 4em FriendsTVFont;
}

#friends li {
    display: inline-block;
}

#friends li:nth-child(3n+1):not(:last-child):after {
    padding-left: 0.75em;
    font: normal 1em helvetica;
    content: '\2022';
    color: red;
}

#friends li:nth-child(3n+2):not(:last-child):after {
    padding-left: 0.75em;
    font: normal 1em helvetica;
    content: '\2022';
    color: yellow;
}

#friends li:nth-child(3n+3):not(:last-child):after {
    padding-left: 0.75em;
    font: normal 1em helvetica;
    content: '\2022';
    color: purple;
}

#friends ul:nth-child(2) {
    font-size: 1.75em;
    text-align: center;
    padding: 1em 0 0;
}

@media ( max-width:62em ) {
#friends ul {
    font-size: 3em;
 }
#friends ul:nth-child(2) {
    font-size: 1.3125em;
 }
#friends li:nth-child(3n+2):not(:last-child):after,
#friends li:nth-child(3n+3):not(:last-child):after {
    padding-left: 0.563em;
 }
}

@media ( max-width:48em ) {
#friends ul {
    font-size: 2.25em;
 }
#friends ul:nth-child(2) {
    font-size: 0.984em;
 }
#friends li:nth-child(3n+2):not(:last-child):after,
#friends li:nth-child(3n+3):not(:last-child):after {
    padding-left: 0.422em;
 } 
}

@media ( max-width:36em ) {
#friends ul {
    font-size: 1.688em;
 }
#friends ul:nth-child(2) {
    font-size: 0.738em;
 }
#friends li:nth-child(3n+2):not(:last-child):after,
#friends li:nth-child(3n+3):not(:last-child):after {
    padding-left: 0.317em;
 }     
}

@media ( max-width:25em ) {
#friends ul {
    font-size: 1.266em;
 }
#friends ul:nth-child(2) {
    font-size: 0.555em;
 }
#friends li:nth-child(3n+2):not(:last-child):after,
#friends li:nth-child(3n+3):not(:last-child):after {
    padding-left: 0.238em;
 }     
}

coothead

[GrumpyYoungMan]

Thanks again!!!! Appreciate it!

Did you see my problem? Looks like you fixed the issue by using extra media queries?

How are you? All good?

[coothead]

Hi there GrumpyYoungMan,

I did not like this idea...

Different Stylesheets for Differently Sized Browser Windows

...and can see no good reason to follow it. 

coothead

[GrumpyYoungMan]

Hi there GrumpyYoungMan,

I did not like this idea...

Different Stylesheets for Differently Sized Browser Windows

...and can see no good reason to follow it. 

coothead

Nor did I, hence why I asked here...

 I thought extra media queries could be the answer and it was by your example... appreciate the help and support!

Maybe you should write a HTML guide?

Thanks again!

Why did you use those break points in the media queries?

[coothead]

Why did you use those break points in the media queries?

I just use this simple manual method to ascertain them.

• open the file in my test  browser Firefox
• click >"Tools" > "Web Developer" > "Responsive Design Mode"
• above the page will appear - information something like this...
  "Responsive 1302 x 568  ....."
• move the cursor towards the right hand side of the page
• when the cursor changes from "default" to "resize", then
  mouse down to grab the page
• pull the page towards the left
• when the page starts to break, check the width value displayed
  above add 16 to it to allow for possible scrollbar
• convert the value to ems by dividing by 16
• code your "@media( max-width: xxem ) { code }"
• repeat the process to check the correctness of the coding
• move on to the next break point
• the aim is to make the page responsive at about 17em

I hope that helps. 

coothead

[GrumpyYoungMan]

Why did you use those break points in the media queries?

I just use this simple manual method to ascertain them.

• open the file in my test  browser Firefox
• click >"Tools" > "Web Developer" > "Responsive Design Mode"
• above the page will appear - information something like this...
  "Responsive 1302 x 568  ....."
• move the cursor towards the right hand side of the page
• when the cursor changes from "default" to "resize", then
  mouse down to grab the page
• pull the page towards the left
• when the page starts to break, check the width value displayed
  above add 16 to it to allow for possible scrollbar
• convert the value to ems by dividing by 16
• code your "@media( max-width: xxem ) { code }"
• repeat the process to check the correctness of the coding
• move on to the next break point
• the aim is to make the page responsive at about 17em

I hope that helps. 

coothead

That helps massively - I didn't realise you could slide the window to resize the design! 

I guess I should stick to my day job! lol

THANK YOU AGAIN!! 

[coothead]

I guess I should stick to my day job!

Why do you say that?

If you find coding pleasurable,  then code. 

Bugger what any one may say about your efforts. 

coothead