skip to Main Content

I want to use Google webfonts hosted on my webspace on a third site (ebay). The code I have doesnt work. What I have so far:

<div id="artikelueberschrift">Überschrift</div>
<style type="text/css"><!--
#artikelueberschrift { font-family:'Roboto',sans-serif;font-weight:300 }
--></style>
<style type="text/css"><!--
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('https://tobiaspietsch.de/Schriftarten/roboto/roboto-v20-latin-regular.woff2') format('woff2'); /* Super Modern Browsers */
}
--></style>

How does it work?

2

Answers


  1. Chosen as BEST ANSWER

    To load content from your webspace on a third site you need to enable Cross-Origin-Ressource-Sharing (CORS). The Same-Origin-Policy (SOP) prohibits loading content from your webspace on a third site. This is a safety measure to prohibit loading of harmful content from other servers and to prohibit harmful access to your server. With CORS you can control which content is allowed to be loaded from your webspace from which server. The CORS header tells what is allowed. To allow access from any other server for the filetypes ttf|otf|eot|svg|woff|woff2 add a file called .htaccess to your webspace with the following content

    <FilesMatch ".(ttf|otf|eot|svg|woff|woff2)$">
            Header set Access-Control-Allow-Origin "*"
    </FilesMatch>

    For further information, see here: htaccess Access-Control-Allow-Origin


  2. @font-face {
       font-family:myRoboto;
       src: url(https://tobiaspietsch.de/Schriftarten/roboto/roboto-v20-latin-regular.woff2);
    }
    
         #artikelueberschrift
     {
         font-family:myRoboto
        font-weight:300 
      }
    

    Please Make this as External Css file,In some cases Property "url" wont work for internal css style

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search