[ANSWERED] html – Confusion Regarding Custom Font Face

Question 1

I don’t find any issue in the font face definition. You could possibly use local and url both in the src property.

Try giving the full url of the font file in url parameter in src.

Also consider reading the below question :

What are Google Webfonts or Typekit alternatives to Avenir Next Pro?
https://graphicdesign.stackexchange.com/questions/16036/what-are-google-webfonts-or-typekit-alternatives-to-avenir-next-pro

I used the css from here : https://fonts.googleapis.com/css?family=Nunito&display=swap for the below demo.

Hope this helps.

h1 {
font-size: 50px;
font-family: 'Nunito';
}

/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIOOaBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIMeaBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIOuaBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIO-aBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

<h1>This is Nunito Font</h1>

Question 2

I made a website that uses the Avenir font-face. It appears that the font does not work for windows machine (I developed this website on my Mac).

My issue is that, based on this tutorial I expected the font to load correctly. Up to this moment the Avenir font appears fine on my Mac but I have a separate contact who tells me that the font loaded for his machine (apparently a windows machine) is the default Times New Roman font.

I am using CPanel, if that matters and here is how the project is structured:

I have a style.css file that has the @font-face set, and the font family set globally per the linked tutorial.

On CPanel, I have the style.css and the .woff files uploaded in the same root directory, under the File Manager > public_html. My project structure looks like this:

Does this mean that my CSS file is unable to find the .woff file? Or would this be an issue with CPanel?

It is hard to debug because I apparently have Avenir on my computer already. Therefore, the font shows up just fine without the @font-face and all of the .woff files. Except for the font, all of the colors and spacing is rendering correctly from the style.css file; only the font is not displaying correctly.

Stack Exchange recommended this post to me but in that post the issue appeared to be a relative path issue. I doubt the source of my issue is the same since the .woff files are in the same directory, and I have tried the import statement in two different ways (src: url('font') and src: url('./font')).

Any advice would be greatly appreciated!

Bollate

[ANSWERED] html – Confusion Regarding Custom Font Face

By

Solution 1 :

Problem :

Comments

Comment posted by Ismail Vittal

Comment posted by im2wddrf

Comment posted by im2wddrf

Comment posted by Ismail Vittal

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate