El propósito de este tutorial sera el utilizar una fuente personalida a nuestro proyecto móvil, eso surge casi siempre por que el cliente o el equipo de diseño tomo la decisión de utilizar una fuente no por defecto del sistema operativo.

El poder utilizar una fuente en los proyecto es bastante fácil, pero para que este tutorial no sea tan corto le agregare varios puntos donde este proceso puede ser caótico y para que no les pase a alguien mas.

Para que react-native pueda linkear las fuentes con las plataformas necesitaremos colocar estas fuentes en un folder (Este puede ser cualquier folder en el proyecto).

El colocar este folder en este nivel es cosa de convención, todo lo hacen así, pero si quieres lo puedes colocar donde quieras.

Configuracion

Para que react-native pueda encontrar dichas fuentes tenemos que agregar esto a nuestro archivo package.json

{"rnpm": {"assets": ["./assets/fonts/"]}}

Dado que la configuración anterior esta deprecada y muy pronto no será soporta tenemos que agregar dicha configuración a un archivo aparte: react-native.config.js

module.exports = {  
  assets: ['./assets/fonts'],
};

Al final nuestro package.json quedaria de esta manera:

{
  "name": "Font",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
      ...
  },
  "devDependencies": {
      ...
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

Una vez realizado todo esto, tenemos que correr el siguiente comando en el directorio raiz del proyecto:

react-native link

Una vez hecho todo esto, todo tiene que esta listo y funcional y podremos utilizar algo como esto en los estilos:

estilo: {
    fontSize: 18,
    fontFamily: 'MountainsofChristmas-Regular',
}

Font-Familly

Es muy problable que el font-familly sea el mismo nombre del archivo, pero esto es solo una convención que puede ser rota en cualquier momento, y me ha pasado donde el nombre del archivo y el font-familly no son el mismo, para saber el font-familly hay varias formas:

Para usuarios mac: 

Puede instalar la fuente en el sistema y abrir FontBook buscar la fuente que necesitamos y el la sección que dice «PostScript name» ese valor seria el nombre de nuestro font-familly

Para usuarios Windows o cualquier tipo de usuario:

Existe esta plataforma online https://fontdrop.info/ donde podremos analizar el archivo fuente y ver la información de esta:

Una vez hecho todo esto, si encuentran un archivo fuente que no coincide con el font-familly hagan un favor a sus hermanos developers y coloquen el nombre del archivo igual que el font-familly, más de uno se lo agradecerá.

Otro tema que hay que tener en cuenta con una fuente personalizada es que si van a utilizarla, evitar a toda costa usar la propiedad fontWeight debido a que si configuramos esta, Android se hará un lio con esto y utilizara la fuente por defecto del sistema y la configurara con el peso que le colocamos, obviando nuestra fuente. Si quieren utilizar un weight diferente utilice la fuente con el weight predeterminado.

Resultado Final