Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't seem to get the fonts to work

See original GitHub issue

I’m trying to get this test deck to work:

import { Head } from 'mdx-deck'

<Head>
  <title>Git! Push</title>
  <meta name='twitter:site' content='@jjmerelo' />
  <meta name='twitter:title' content='Git! Push! What is it good for?' />
  <meta name='twitter:description' content='Absolutely everything!' />
  <link href="https://fonts.googleapis.com/css?family=Allerta+Stencil|Open+Sans" rel="stylesheet" /> 
</Head>


export { default as theme } from './theme'

# Git! Push!
## What is it good for!
# Absolutely everything!
---
# That's me!

---
<code>git push!</code>

With this theme.js

// example theme.js
import { future } from 'mdx-deck/themes'
import okaidia from 'react-syntax-highlighter/styles/prism/okaidia'
import prismBash from 'react-syntax-highlighter/languages/prism/bash'
const monospace = 'SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace'
const allerta = 'Allerta Stencil, sans-serif'
const opensans = 'Open Sans, sans-serif'

export default {
	...future,
    font: allerta, opensans,
    heading: {
	fontFamily: allerta,
    },
    h1: {
	fontSize: '5em',
	textTransform: 'none',
	fontFamily: allerta,
    },
    h2: {
	fontSize: '3em',
	textTransform: 'none',
	fontFamily: opensans,
    },
    prism: {
	style: okaidia,
	fontSize: '2em',
	languages: {
	    bash: prismBash
	}
    }
    
}

(heavily inspired by @broccolini’s deck). However, the fonts are not set correctly; they seem to use the default font. Any help? Also, are there any other examples? It would help if they were linked directly from the README.md

Issue Analytics

State:
Created 5 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

JJcommented, Nov 14, 2018

I’m checking several fonts and apparently the problem is that it can use correctly some “common” fonts such as Lato or Roboto, but does not include other fonts like Koho or Allerta and the mechanism that includes that in the header is not apparently working.

0reactions

jxnblkcommented, Apr 20, 2019

This has changed since v2. I’d recommend using the <Head> component to add stylesheet links for custom webfonts

Top Results From Across the Web

I can't seem to get my font-family to work using @font-face

I can't seem to get my font-family to work using @font-face · try using .woff font type... .otf type has spotty browser support...

Troubleshoot font activation problems in Creative Cloud

Signing out of Creative Cloud and restarting the computer stops any font-related processes that may not be running correctly and starts new ones ......

Can't install font under windows 10! Fix - YouTube

Having problems with windows 10 ? Trying to install a font and it won't appear in the drop down when using the text...

Install and validate fonts in Font Book on Mac - Apple Support

To use fonts in your apps, you need to install the fonts using Font Book. When you're installing fonts, Font Book lists any...

How to install fonts on a Mac and make them available to all ...

Whether you're working on a personal project, trying to open a ... If you've just installed some fonts and you can't seem to...