How to import a custom CSS font with Elm

1,434 views
Skip to first unread message

Gulshan Singh

unread,
Dec 30, 2014, 5:08:06 PM12/30/14
to elm-d...@googlegroups.com
I want to import a font from Google Fonts and then use it with `Text.typeface`. Essentially, if I had an HTML page, I would add this to the `head` element: 

<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>

However, I don't want to make an HTML page and call Elm from it, I want everything to be done from Elm. Is there any way to add this font?


Max Goldstein

unread,
Dec 30, 2014, 6:55:43 PM12/30/14
to elm-d...@googlegroups.com
Yes!

When you run elm-make, you generate elm.js. You can then create a standard HTML page and include elm.js in a script tag.

You can see an example of elm-js interop here (note that it's not updated for 0.14), including an HTML file to get you started. Ignore the part about ports. You also don't need to load the runtime anymore (it's part of elm.js).

If you need more detailed instructions, let us know.

Gulshan Singh

unread,
Dec 31, 2014, 12:39:56 AM12/31/14
to elm-d...@googlegroups.com
Thanks for the response Max, but I'm still having issues. I have a file called test.elm that looks like this:

import Text (plainText)
   
main = plainText "hello world"

Then I run `elm-make test.elm` on the command line and confirm that elm.js is generated.

Then I create an HTML file (in the same directory as elm.js) called index.html that looks like this:

<html>
    <head>
        <script src="elm.js"></script>
    </head>
</html>

I didn't include a body tag because I thought elm.js might generate it, but I tried it with and without it and there's no difference. The page just shows up as blank. I've tested this in the latest Chrome and Firefox, and there are no errors in the console. What am I doing wrong?

Alex Neslusan

unread,
Jan 1, 2015, 6:07:06 AM1/1/15
to elm-d...@googlegroups.com
It used to be possible to put this link in a markdown block and do everything within Elm, but I don't know if that trick still works now that markdown is a library.

Alex Darlington

unread,
Jan 1, 2015, 11:24:44 AM1/1/15
to elm-d...@googlegroups.com
Hi Gulshan,
You would need your html file to look a bit more like:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<link rel="stylesheet" type="text/css" href="yourStyle.css">
<script type="text/javascript" src="elm.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var yourPgm = Elm.fullscreen(Elm.Main);
</script>
</html>

This link might help as well:

Cheers,
Alex.

Gulshan Singh

unread,
Jan 1, 2015, 12:24:41 PM1/1/15
to elm-d...@googlegroups.com
Thanks Alex, I got it working with that HTML.

--
You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/FP5Ly4e40_4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Gulshan Singh

unread,
Jan 1, 2015, 2:45:08 PM1/1/15
to elm-d...@googlegroups.com
One annoying thing now is that `elm.js` only gets regenerated when I access my elm file in the browser or run `elm-make` again. I've seen a lot of other frameworks that recompile on any file modification, that would be helpful here.
To unsubscribe from this group and all its topics, send an email to elm-discuss+unsubscribe@googlegroups.com.

flip101

unread,
Sep 20, 2015, 9:55:19 AM9/20/15
to Elm Discuss
This works, unfortunately the elm part is not recompiled on page load, so you have to use a seperate page (or command ?) to recompile the elm and then you can view it with your custom style sheets using this html. Anyone knows how to do this in 1 step?

Op donderdag 1 januari 2015 17:24:44 UTC+1 schreef Alex Darlington:

Peter Damoc

unread,
Sep 20, 2015, 10:21:15 AM9/20/15
to Elm Discuss
I've played some time ago with Material Design. 

Take a look at this code to get an idea how is done:
https://github.com/pdamoc/elm-mdl/blob/master/src/Mdl.elm

in short, you use `style` and `script` nodes. :) 



--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--
There is NO FATE, we are the creators.
blog: http://damoc.ro/

flip101

unread,
Sep 20, 2015, 12:14:24 PM9/20/15
to Elm Discuss
Sorry i forgot to mention i use the startapp template, not sure if it's possible to override the html head there ...

Op zondag 20 september 2015 16:21:15 UTC+2 schreef Peter Damoc:

Amitai Burstein

unread,
Sep 20, 2015, 2:14:10 PM9/20/15
to Elm Discuss
Maybe this is where yo elmlang can be handy, as it scaffolds an app along with Bootstrap so it can serve as a good example. Later, you simply run "gulp" and it will auto-compile and reload your page on every code change.

Peter Damoc

unread,
Sep 20, 2015, 3:24:37 PM9/20/15
to Elm Discuss
I don't see why not. Just add the lines in the main view. It should work. 
Html.node "style" [type' "text/css"] [Html.text "@import url(your font url here)"]

:)

flip101

unread,
Sep 20, 2015, 4:37:55 PM9/20/15
to Elm Discuss
Ok it could work .. just additionally it already defines some styling. Full control over the html / css would be better

<style>html, head, body { padding:0; margin:0; }
body { font-family: calibri, helvetica, arial, sans-serif; }
a:link { text-decoration: none; color: rgb(15,102,230); }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: underline; color: rgb(234,21,122); }
html,body { height: 100%; margin: 0px; }
</style>



Op zondag 20 september 2015 21:24:37 UTC+2 schreef Peter Damoc:

Simon

unread,
Oct 6, 2015, 7:24:46 AM10/6/15
to Elm Discuss
Just to flesh this out for the record, as I could not work with it immediately

    div []
        <|  Html.node "link" [rel "stylesheet", type' "text/css", href "styles.css"] []
            :: [other elements]
Reply all
Reply to author
Forward
0 new messages