{"_id":"5429cb1b2e366c080086b777","is_link":false,"project":"542979c51215fe08007e0ee5","user":"542979b61215fe08007e0ee4","version":{"_id":"542979c51215fe08007e0ee8","project":"542979c51215fe08007e0ee5","__v":4,"createdAt":"2014-09-29T15:24:53.437Z","releaseDate":"2014-09-29T15:24:53.437Z","categories":["542979c51215fe08007e0ee9","542985897a6b690800767fab","5429898d1215fe08007e0fe6","542ac5aa54d88d140075fcaf"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"5429898d1215fe08007e0fe6","pages":["5429ad872e366c080086b5c6","5429cb1b2e366c080086b777","542db0adcb19820800c1f4a3","54380c2df15a8e1400831f88","542aee7d54d88d140075ff00","542af02f54d88d140075ff14","542f14abacabcf080095953b","54651c6df42a472000b0c611","55f81b4f59eace0d0087db2b","56b0c5d81486990d009c101a","56babbffc275570d00ce7105"],"project":"542979c51215fe08007e0ee5","version":"542979c51215fe08007e0ee8","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-09-29T16:32:13.661Z","from_sync":false,"order":1,"slug":"helpers","title":"Helpers"},"parentDoc":null,"__v":7,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-09-29T21:11:55.497Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"try":true,"basic_auth":false,"results":{"codes":[]},"settings":"","auth":"never","params":[],"url":""},"isReference":false,"order":2,"body":"Inkcite makes it easy to manage the fonts and styles you use throughout your email.  All container elements (`{td}`, `{div}` and `{span}`) plus `{img}` and `{a}` support the `font` attributes.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{div font-size=25 font-weight=bold}\\n   This text will display bolded, 25px in the default font family.\\n{/div}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nContainer elements support the following font-related attributes: `color`, `font-family`, `font-size`, `font-weight`, `line-height`, `letter-spacing`.\n\n## Named Font Styles\n\nYou're likely going to use the same size, line height, weight and font family repeatedly in your email.  Keeping your code DRY is important, so Inkcite makes it easy to define a set of font attributes as a *named style*.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Define the default font used throughout your email \\ndefault-color\\t{#text}\\ndefault-font-size\\t12\\ndefault-line-height\\t18\",\n      \"language\": \"text\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\nNow, in your `source.html` file, you can quickly and easily apply this style to any container element:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{div font=default}\\n   This text will have all of the font settings (color, size and\\n   line-height) specified in helpers.tsv.\\n{/div}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nYou can mix-and-match font attributes for maximum flexibility.  You can override any attribute specified in a *named style* inside of the container.  For example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{div font=default color=#f00}\\n   This text will have all of the default font attributes (size,\\n   line-height and responsiveness) but the color has been changed\\n   from {#text} to red.\\n{/div}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\n## Web Fonts\n\nInkcite makes it easy to use [Google Fonts](https://www.google.com/fonts) and [Hoefler&Co Fonts](http://www.typography.com/cloud/user-guide/fonts-in-email) in your email.  Several email clients, particularly mobile ones, support custom fonts specified via CSS.  \n\nAfter you have selected one or more fonts for your project, the font host should provide you with a URL (or *CSS Key* as H&Co refers to it) to a stylesheet.  For example, by selecting the 100- and 700-weights of [Roboto](https://www.google.com/fonts/specimen/Roboto), Google gives you this `<link>` tag:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link href='https://fonts.googleapis.com/css?family=Roboto:100,700'\\n   rel='stylesheet' type='text/css'>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nCopy just the the URL and include it inside of your project's `config.yml` file in a new `fonts:` section. You can include as many font URLs as your email design requires.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"fonts:\\n  - https://fonts.googleapis.com/css?family=Roboto:100,700\\n  - https://cloud.typography.com/1234/5678/css/fonts.css\",\n      \"language\": \"yaml\",\n      \"name\": \"config.yml\"\n    }\n  ]\n}\n[/block]\nOnce the font is declared inside of `config.yml` you are now free to use the `font-family` and `font-weight` attributes just like you would in normal CSS.  For example, to use the 700-weight in a custom `{h1}` helper you might configure it like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"h1\\t{div font-family=\\\"Roboto,Arial\\\" font-weight=700}\\t{/div}\",\n      \"language\": \"text\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\nAlternatively, you could declare the font family in `helpers.tsv` as a part of a *named style*:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"headline-font-family\\tRoboto,Arial\\nheadline-font-size\\t25\\nheadline-font-weight\\t700\\nheadline-color\\t#248FB2\\n\\nh1\\t{div font=headline}\\t{/div}\\n\\n// Slightly smaller headline that inherits the other font settings \\n// but overrides the font size.\\nh2\\t{div font=headline font-size=18}\\t{/div}\",\n      \"language\": \"text\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\n## Responsive Fonts\n\nAs suggested earlier, all container elements support responsive fonts.  These attributes mirror their desktop counterparts but are prefixed with `mobile-` such as `mobile-font-size` or `mobile-line-height`.  \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{div font-size=18 mobile-font-size=25}\\n   On desktop, this text will be 18px but on mobile devices it will\\n   display in 25px size.\\n{/div}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nWhen present, Inkcite applies the correct CSS and media queries to the element so that on smaller mobile devices (e.g. phones), the text within can have adjusted visual appearance.\n\nTo keep your code DRY, responsive fonts are fully supported in `helpers.tsv`:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Defines default desktop and mobile fonts for this email.\\ndefault-color\\t{#text}\\ndefault-font-size\\t12\\ndefault-line-height\\t18\\ndefault-mobile-font-size\\t16\\ndefault-mobile-line-height\\t22\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]","excerpt":"Easy global font styles for your email","slug":"fonts","type":"basic","title":"Fonts"}

Fonts

Easy global font styles for your email

Inkcite makes it easy to manage the fonts and styles you use throughout your email. All container elements (`{td}`, `{div}` and `{span}`) plus `{img}` and `{a}` support the `font` attributes. [block:code] { "codes": [ { "code": "{div font-size=25 font-weight=bold}\n This text will display bolded, 25px in the default font family.\n{/div}", "language": "html", "name": "source.html" } ] } [/block] Container elements support the following font-related attributes: `color`, `font-family`, `font-size`, `font-weight`, `line-height`, `letter-spacing`. ## Named Font Styles You're likely going to use the same size, line height, weight and font family repeatedly in your email. Keeping your code DRY is important, so Inkcite makes it easy to define a set of font attributes as a *named style*. [block:code] { "codes": [ { "code": "// Define the default font used throughout your email \ndefault-color\t{#text}\ndefault-font-size\t12\ndefault-line-height\t18", "language": "text", "name": "helpers.tsv" } ] } [/block] Now, in your `source.html` file, you can quickly and easily apply this style to any container element: [block:code] { "codes": [ { "code": "{div font=default}\n This text will have all of the font settings (color, size and\n line-height) specified in helpers.tsv.\n{/div}", "language": "html", "name": "source.html" } ] } [/block] You can mix-and-match font attributes for maximum flexibility. You can override any attribute specified in a *named style* inside of the container. For example: [block:code] { "codes": [ { "code": "{div font=default color=#f00}\n This text will have all of the default font attributes (size,\n line-height and responsiveness) but the color has been changed\n from {#text} to red.\n{/div}", "language": "html", "name": "source.html" } ] } [/block] ## Web Fonts Inkcite makes it easy to use [Google Fonts](https://www.google.com/fonts) and [Hoefler&Co Fonts](http://www.typography.com/cloud/user-guide/fonts-in-email) in your email. Several email clients, particularly mobile ones, support custom fonts specified via CSS. After you have selected one or more fonts for your project, the font host should provide you with a URL (or *CSS Key* as H&Co refers to it) to a stylesheet. For example, by selecting the 100- and 700-weights of [Roboto](https://www.google.com/fonts/specimen/Roboto), Google gives you this `<link>` tag: [block:code] { "codes": [ { "code": "<link href='https://fonts.googleapis.com/css?family=Roboto:100,700'\n rel='stylesheet' type='text/css'>", "language": "html" } ] } [/block] Copy just the the URL and include it inside of your project's `config.yml` file in a new `fonts:` section. You can include as many font URLs as your email design requires. [block:code] { "codes": [ { "code": "fonts:\n - https://fonts.googleapis.com/css?family=Roboto:100,700\n - https://cloud.typography.com/1234/5678/css/fonts.css", "language": "yaml", "name": "config.yml" } ] } [/block] Once the font is declared inside of `config.yml` you are now free to use the `font-family` and `font-weight` attributes just like you would in normal CSS. For example, to use the 700-weight in a custom `{h1}` helper you might configure it like this: [block:code] { "codes": [ { "code": "h1\t{div font-family=\"Roboto,Arial\" font-weight=700}\t{/div}", "language": "text", "name": "helpers.tsv" } ] } [/block] Alternatively, you could declare the font family in `helpers.tsv` as a part of a *named style*: [block:code] { "codes": [ { "code": "headline-font-family\tRoboto,Arial\nheadline-font-size\t25\nheadline-font-weight\t700\nheadline-color\t#248FB2\n\nh1\t{div font=headline}\t{/div}\n\n// Slightly smaller headline that inherits the other font settings \n// but overrides the font size.\nh2\t{div font=headline font-size=18}\t{/div}", "language": "text", "name": "helpers.tsv" } ] } [/block] ## Responsive Fonts As suggested earlier, all container elements support responsive fonts. These attributes mirror their desktop counterparts but are prefixed with `mobile-` such as `mobile-font-size` or `mobile-line-height`. [block:code] { "codes": [ { "code": "{div font-size=18 mobile-font-size=25}\n On desktop, this text will be 18px but on mobile devices it will\n display in 25px size.\n{/div}", "language": "html", "name": "source.html" } ] } [/block] When present, Inkcite applies the correct CSS and media queries to the element so that on smaller mobile devices (e.g. phones), the text within can have adjusted visual appearance. To keep your code DRY, responsive fonts are fully supported in `helpers.tsv`: [block:code] { "codes": [ { "code": "// Defines default desktop and mobile fonts for this email.\ndefault-color\t{#text}\ndefault-font-size\t12\ndefault-line-height\t18\ndefault-mobile-font-size\t16\ndefault-mobile-line-height\t22", "language": "text" } ] } [/block]