How to load Google webfonts from my webspace (on a third site)?

Question

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?

score 0 · Answer 1 · answered Jul 26 '20 at 19:49

0

@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

answered Jul 26 '20 at 19:49

Vasanth Vadivel

124
5

This is working: `src: local('Roboto Light'), local('Roboto-Light'), url('fonts.gstatic.com/s/roboto/v20/…) format('woff2'); /* Super Modern Browsers */` So the URL property cant be the solution. – T. P. Jul 27 '20 at 05:43
Besides I would need to import the css file with the URL property, too, like this: `@import url('https://tobiaspietsch.de/schriftartroboto.css');` – T. P. Jul 27 '20 at 05:51

score 0 · Accepted Answer · answered Aug 02 '20 at 06:24

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

How to load Google webfonts from my webspace (on a third site)?

2 Answers2