How can I make comic sans MS text logo using CSS?

Question

I want to make my website's colored logo using font-family : comic sans MS, I don't want to make an photo of my logo, I just want to do it using CSS and HTML, I have used @font-face:

Here is my css:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
    url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

.logo{
  font-family:'MyWebFont', Fallback, "comic sans MS"! important;
  font-size : 20px! important;
  margin-left : 33%! important;
}

.logo:visited{
  text-decoration: none! important; 
}

.logo:active{
  text-decoration : none! important;    
}

.logo:hover{
  text-decoration : none! important;
  text-shadow: -3px 1px 13px yellow;
  transition-duration : 0.2s;       
}

On Desktop Screen it looks good 'comic sans MS' text, but on mobile devices my font-family 'comic sans MS' does not applied

Maybe `comic sans MS` not installed on mobile devices by default but on the desktop it does. — Mosh Feu, Jun 13 '16 at 14:49
@MoshFeu yes, you are right !! but what should i do to solve it ? — shubham, Jun 13 '16 at 14:50
Try the solutions in this question: http://stackoverflow.com/q/21334839/863110. If it doesn't work, I'm afraid that you will need to find a similar web font. — Mosh Feu, Jun 13 '16 at 14:55
`I want to make my website's colored logo using font-family : comic sans MS` Like...on a dare? — aquinas, Jun 13 '16 at 16:05
BUT WHYYYYYYYYYYYYY? Also, are all your files actually there? The code looks pretty much correct. Painful and murderous, but correct. — somethinghere, Jun 13 '16 at 16:16

score 0 · Answer 1 · answered Jun 13 '16 at 16:03

0

For iphone / android phones. i think that .ttf and .svg would do the thing. if you want to use it. change MyWebFont to Comic Sans MS. the css code to use it should be :

font-family: "Comic Sans MS", cursive, sans-serif;

answered Jun 13 '16 at 16:03

Cth103

63
5

The name of the font is for internal use only, so it doesn't really matter if you rename it as long as your rename it everywhere. THis indicates it is more likely to be another problem, be it with files or code somewhere. – somethinghere Jun 13 '16 at 16:18

How can I make comic sans MS text logo using CSS?

1 Answers1