Gotham Book' Font-Family Not Working in Safari Browser and iPhone Devices

Gotham Book' font-family not working in Safari browser and IPhone devices

This is the working Solution
CSS :

  @font-face {
  font-family: "gotham";
  src: url('ff/Gotham-Book.woff') format('woff'),
       url('ff/Gotham-Book.woff2') format('woff2'),
       url('ff/Gotham-Book.ttf') format('truetype');
  font-weight: normal;
}

and Please replace your existing font by downloading font from below URl:

https://drive.google.com/open?id=1pbdpXbPRCJC6Qi-QpNGt7WbLuwtwDRUW

Thanks

GothamBold font not rendering on Safari

I found the solution. Old safari version doesn't support this type of declaration. I need to declare font with different name :

@font-face {
 font-family: 'Gotham HTF';
 src: url("font/GothamHTF-Book.woff") format("woff");
 url("font/GothamBook.ttf") format("truetype");
}

@font-face {
 font-family: 'Gotham HTF Bold';
 src: url("font/Gotham-Bold.woff") format("woff"),
 url("font/Gotham-Bold.woff2") format("woff2"),
 url("font/Gotham-Bold.ttf") format("truetype");
}

Font Face Gotham is not working on my IE 8,9,10 but works fine in my friend's IE?

turns out that this is because of internet option security settings :| - simply go to internet option > security > custom level > find font download > choose enable. Refresh your page and tadaaa~..yeah, it works.

I have three font type -Gotham-bold, Gotham-medium, Gotham-thin, so do I need to use three times @font-face?

That is correct, you'll need an @font-face for each weight of the font you want to use.

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/Gotham-Bold.woff') format('woff'), /* Modern Browsers */
     url('fonts/Gotham-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/Gotham-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: 700;
   font-style: normal;
 }

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Medium.eot'); /* IE9 Compat Modes */
  src: url('fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/Gotham-Medium.woff') format('woff'), /* Modern Browsers */
     url('fonts/Gotham-Medium.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/Gotham-Medium.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: 400;
   font-style: normal;
 }

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Thin.eot'); /* IE9 Compat Modes */
  src: url('fonts/Gotham-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/Gotham-Thin.woff') format('woff'), /* Modern Browsers */
     url('fonts/Gotham-Thin.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/Gotham-Thin.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: 300;
   font-style: normal;
 }

Then you can use your fonts as so:

body {
   font-family: 'Gotham';
}

// For normal
.normal {
  font-weight: 400;
}

// For bold
.bold,
strong {
  font-weight: 700;
}

// For thin
.light {
  font-weight: 300;
}

Gradient border and text is not working on Safari and IPhone devices

try to implement this logic in your code :

https://codepen.io/KnightOfInfinity/pen/jOBQPxz

code::
html -

<html>
<body>
<p>Biometrics</p>
</body>
</html>

css -

/*  gradient variable */
:root{
  --gradient: linear-gradient(to right, yellow, green);
}
/*
  align items to center inside the body
*/
body{
  display: flex;
  justify-content: center;
  align-items:center;
  background: #121212;
}

/* real useful code  */
/*    text    */
p{
  display:block;
  height: contain;
  max-width: max-content !important;
  font-size: 63px;
  font-weight: 900;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: red;
}
/*    underline   */
p:after {
    content: '\00a0';
    background-image:
      var(--gradient);
    background-size: 100% 12px;
    background-repeat: no-repeat;
    float:left;
    width:100%;
}

Gotham Book' Font-Family Not Working in Safari Browser and iPhone Devices