# How can I add css and font files to the head?

**URL:** <https://discourse.elm-lang.org/t/how-can-i-add-css-and-font-files-to-the-head/3773>\
**Category:** Learn\
**Created:** [June 9, 2019, 12:14am UTC](https://discourse.elm-lang.org/t/how-can-i-add-css-and-font-files-to-the-head/3773 "2019-06-09T00:14:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kochab](https://avatars.discourse-cdn.com/v4/letter/k/a88e57/32.png) [@Kochab](https://discourse.elm-lang.org/u/Kochab)\
**Post date:** [June 9, 2019, 12:14am UTC](https://discourse.elm-lang.org/t/how-can-i-add-css-and-font-files-to-the-head/3773/1 "2019-06-09T00:14:39Z")

</div>

I’m currently adding my css like this:

```
css path =
    node "link" [rel "stylesheet", href path] []

view : Model -> Html Msg
view model =
    div []
        [ css "css/normalize.css"
        , css "css/styles.css"
        ...

```

which I like because I can just edit css in a regular css file, but of course the script is linked inside the div element. How can I link everything in the head?

Edit: What I decided to do was add the link tags to a custom HTML file and output elm to JS instead of HTML. I’m also using [elm-live](https://github.com/wking-io/elm-live) to serve everything. All my static files live in a `dist` folder. This includes css, images, main.js, and index.html. Then I run this command:  
`elm-live src/Main.elm --open --dir=./dist -- --output=./dist/main.js`

---

<div class="post-metadata">

**Author:** ![berend](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/berend/32/2250_2.png) [@berend](https://discourse.elm-lang.org/u/berend)\
**Post date:** [June 9, 2019, 9:44pm UTC](https://discourse.elm-lang.org/t/how-can-i-add-css-and-font-files-to-the-head/3773/2 "2019-06-09T21:44:53Z")

</div>

You can’t.

But perhaps you should reconsider the use of separate CSS files. It’s a bit of change, but I’m slowly leaning toward this myself. The link between separate CSS and code is not strong. It’s very easy, over time, to end up with CSS that is no longer being used. CSS in code doesn’t have that problem.

---

<div class="post-metadata">

**Author:** ![joakin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/joakin/32/171_2.png) [@joakin](https://discourse.elm-lang.org/u/joakin)\
**Post date:** [June 9, 2019, 10:00pm UTC](https://discourse.elm-lang.org/t/how-can-i-add-css-and-font-files-to-the-head/3773/3 "2019-06-09T22:00:18Z")

</div>

> [@Kochab](#):
>
> How can I link everything in the head?

Why don’t you add the link tags in the HTML file in the `head` tag? That way the browser can start loading the CSS files and your Elm generated HTML will be properly styled on render.

If you add the link tags in Elm they won’t be attached to the DOM until the JS has been parsed and the Elm code has executed, which means the browser doesn’t see them until then, and you may get a FOUC (Flash Of Unstyled Content) in real internet connections (in local development you probably won’t see it).

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [June 19, 2019, 10:00pm UTC](https://discourse.elm-lang.org/t/how-can-i-add-css-and-font-files-to-the-head/3773/4 "2019-06-19T22:00:19Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.