How to import Fonts into a React.js project


#1

I need to import two fonts that I have been given. One is from Typekit and the other one is San Francisco from Apple.

The first font is Oscine, and after adding the script into the <head> tag, I should be able to use it in any css file just by using font-family: 'oscine', sans-serif;, but wherever I try to use the font, instead of using Oscine, uses Sans-serif, so that is the prove that I might be missing something.

For the second font, I have been given the @font-face, pasted to the main css file, but doesn't work.

What I´m doing wrong?


#2

What is the script that you added for the Oscine font? Could you post it here?

When you used @font-face, where was the font? Is it a file stored somewhere in the website folders, or an external link? Perhaps you could post the rest of that code also.

Otherwise, there really isn't enough information here to go on.


#3

I don't know if I could have problems if I paste the script code of the Oscine font. It's from Typekit and it's a paid font, so I have changed the id. It looks like the code below:

<script>      
 (function(d) { 
var config = { kitId: id, scriptTimeout: timeout,async: true },

h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b /g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsBy TagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk .onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return ;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s )       })(document); </script>

The instructions I have been given is just to paste the code in the <head> tag of my html and use it in any css file as always.

For the SF Font I have the files directly.


#4

Solved the problem with the first font. Keep looking for a solution for the San Francisco font.


#5

For the sake of other readers, how did you solve the first font, @egoicantero?


#6

Instead of using the script, importing the Css file with <link>, just by knowing the ID.

<link rel="stylesheet" href="https://use.typekit.net/heregoestheid.css">

Here is more information: https://helpx.adobe.com/typekit/using/add-fonts-website.html