Question: how do I use a custom font?

Asked By
jonathanfishbein1
Asked At
2017-07-26 19:45:28

Found 15 possible answers.

User Answered At Possible Answer
mgriffith 2017-07-26 20:05:37 there’s Font.typeface for setting normal font names. There’s currently no support for @fontface , but Im planning on having that in the upcoming release
jonathanfishbein1 2017-07-26 20:06:10 thanks
mgriffith 2017-07-27 12:13:39 anyone have thoughts on a default background-size ? My initial thought is cover https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
gampleman 2017-07-27 12:24:42 tbh I think the most natural is the actual default of auto auto since that should preserve the size and proportion of the source image
mgriffith 2017-07-27 12:27:09 ah, yeah, that makes total sense ugh, wish I had a “most common usage” dataset hmm, actually, I’m not %100. That makes sense for normal images, but is that the common case for background images?
brianhicks 2017-07-27 12:39:39 size might vary every time. IIRC it's already a record, isn't it? wouldn't it be better to require a specification in the API?
mgriffith 2017-07-27 12:43:24 so theres image and imageWith image takes just the src
gampleman 2017-07-27 12:46:30 the main problem with cover is that if the image is smaller than the element than it will be stretched and look awful auto auto is useful also when tiling backgrounds
mgriffith 2017-07-27 12:51:11 for tiling, they’d have to use imageWith anyway and specify the repeat.
gampleman 2017-07-27 12:51:49 right
mgriffith 2017-07-27 16:41:54 so I resolved it by having two shortcuts for background image. There’s Background.image , which has the natural width/height, there’s Background.coverImage which has background-size as cover and there’s Background.imageWith where you can do anything.
aion 2017-07-27 18:40:08 hmm is it true that text inside an el is not respecting center and verticalCenter instructions?
i figured! :smile:
When applied to singular elements like el, alignment will affect the alignment of that individual element. what i'm doing wrong here? @aion uploaded a file: not centered - why.png https://elmlang.slack.com/files/aion/F6EN55A1J/not_centered_-_why.png and image:
                text "Message Filtering"
            <|
                ]
                , height <| px 44
                , width <| percent 100
                , verticalCenter
                [ center
            el MessageFiltering
el None [ padding 5 ] <|
mgriffith 2017-07-27 18:58:34 The idea there is that you would have layout set a general alignment, but then individual elements could override that if they needed to.
aion 2017-07-27 18:59:33 makes sense :heart: so much in this library just makes sense once you know how to look at it :smile: How did you actually discovered it? :smile: that initial idea.. i actually have a meta question: how did you realized that div is a bad way to do things? What happened? :smile: - few months back i was working on a visual IDE for elm - and i was planing to create view functions using only drag and drop - i couldn't figure out a good solution for combining css + html - and i put it on hold. I though about it for a few days but nothing like what you have discovered. I'm quire fascinated with the simplicity of this hole approach to building view functions..
mgriffith 2017-07-27 19:05:46 So, that idea came way later. but its much much better to just control their context completely and it does help…a little… and for a long time, I thought just organizing those properties that had those effects…I thought organizing them better would help I realized a TON of css properties have weird effects that depend on their DOM context the trick was to limit weird side effects, actually so, that was a long journey and it took me something like 10 months to figure out what “unbreakable style” actually meant that question started..actually this is interesting, the first commit was July 28th, 2016, almost exactly a year ago Honestly the first idea that got me started on the library was ” what if we had style that was as unbreakable as elm code?”

Related Questions