font-face not working

Question

Don t know why but font is not displaying Please help   CSS in css folder      style css    font-face     font-family  Gotham   src  url    fonts gothammedium eot    src  local  Gotham-Medium     url    fonts Gotham-Medium ttf  format  truetype         a     font-family Gotham Verdana Arial

User · Answer

This is probably due to CORS  or not quoting paths  and is expected behaviour   I know it sounds confusing  but the reason is due to the source of your fonts and not the web page itself  A good explanation and numerous solutions for Apache  NGINX  IIS or PHP available in multiple languages can be found here  https   www hirehop com blog cross-domain-fonts-cors-font-face-issue

User · Answer

try to put below html in head tag It worked for me     lt title gt ABC lt  title gt    lt meta http-equiv  Content-Type  content  text html  charset UTF-8   gt     lt meta name  viewport  content  width device-width  initial-scale 1  maximum-scale 1  gt

User · Answer

I m also facing this type of problem  After trying all solutions I got final solution on this problem  Reasons for this type of problem is per-defined global fonts  Use  important keyword for each line in  font-face is the solution for this problem   Full description and example for Solution of this problem is here  -  http   answerdone blogspot com 2017 06 font-face-not-working-solution html

User · Answer

I had this problem recently and the problem was that my web server was not configured to serve woff files   For IIS 7  you can select your site  then select the MIME Types icon   If  woff is not in the list  you need to add it   The correct values are  File name extension   woff MIME type  application font-woff

User · Answer

You need to put the font file name   path in quotes  Eg   url     fonts Gotham-Medium ttf     or  url     fonts Gotham-Medium ttf     and not  url    fonts Gotham-Medium ttf    Also  FONT-FACE only works with some font files    o   All the sites where you can download fonts  never say which fonts work and which ones don t

User · Answer

I was having this same issue and I thought I d share my solution as I didn t see anyone address this problem specifically   The problem was I wasn t using the correct path  My CSS looked like this    font-face   font-family   sonhoregular   src  url  fonts vtkssonho-webfont eot    src  url  fonts vtkssonho-webfont eot    format  embedded-opentype         url  fonts vtkssonho-webfont woff2   format  woff2         url  fonts vtkssonho-webfont woff   format  woff         url  fonts vtkssonho-webfont ttf   format  truetype         url  fonts vtkssonho-webfont svg vtks sonhoregular   format  svg    font-weight  normal  font-style  normal    The problem with the path is that I am referring to the font from my CSS file  which is in my CSS folder  I needed to come up a level first  then into the fonts folder  This is what it looks like now  and works great     font-face   font-family   sonhoregular   src  url     fonts vtkssonho-webfont eot    src  url     fonts vtkssonho-webfont eot    format  embedded-opentype         url     fonts vtkssonho-webfont woff2   format  woff2         url     fonts vtkssonho-webfont woff   format  woff         url     fonts vtkssonho-webfont ttf   format  truetype         url     fonts vtkssonho-webfont svg vtks sonhoregular   format  svg    font-weight  normal  font-style  normal    I hope this helps someone out

User · Answer

Double period      means you go up one folder and then look for the folder behind the slash   For example   If your index html is in the folder html files and the fonts are in html fonts  the    is fine  because you have to go back one folder to go to  fonts   Is your index html in html and your fonts in html fonts  then you should use only one period   Another problem could be that your browser might not support  eot font-files   Without seeing more of your code  and maybe a link to a live version of your website   I can t really help you further   Edit  Forget the  eot part  I missed the  ttf file in your css   Try the following    font-face    font-family  Gotham  src  url    fonts gothammedium eot   src  url    fonts Gotham-Medium ttf

User · Answer

By using the    operator  you ve have duplicated the folder path - and will get something like this    wp-content themes wp-content themes twentysixteen fonts    Use the console in your browser to see for this error

User · Answer

Not sure exactly what your problem is  but try the following    Do the font files exist  Do you need quotes around the URLs  Are you using a CSS3-enabled browser    Check here for examples  if they don t work for you then you have another problem  Edit   You have a bunch of repeated declarations in your source  does this work    font-face   font-family  Gotham  src  url     fonts gothammedium eot       a   font-family Gotham Verdana Arial

User · Answer

I was developing for an Arabic client  and had an issue like this as well  after using a font generator to create my fonts  None of the fonts I was generating were working   It turns out that there was a setting in the  Advanced options  of the genrator which I needed to select which would not only use a the Western language glyphs  a pre-selected option    After removing this subset  my fonts then worked with the Arabic characters  I hope this may help someone else in this position   Cheers

User · Answer

Using font-face requires a little understanding of browser inconsistencies and may require some changes on the web server itself  First thing you have to do is check the console to see if what messages are being generated  Is it a permissions issue or resource not found        Secondly because each browser is expecting a different font type I would use Font Squirrel to upload your font and then generate the additional files and CSS needed  http   www fontsquirrel com fontface generator  And finally  versions of FireFox and IE will not allow fonts to be loaded cross domain  You may need to modify your Apache config or  htaccess  Header set Access-Control-Allow-Origin

[css] @font-face not working

Examples related to css